/* Ludificator · herramienta de autor.
   Columna central de trabajo, paneles por bloque, barra de pasos fija arriba del contenido.
   Mismo acento ámbar que el reproductor para que la marca se reconozca. */
:root { --ludi-css: "2.63"; } /* v1.95: marca de versión (publicar la actualiza); si no coincide, la página recarga este archivo */
:root {
  --fondo: #eef0f4;
  --superficie: #ffffff;
  --superficie-2: #f6f7fa;
  --tinta: #141a26;
  --tinta-2: #5b6374;
  --borde: #d9dde5;
  --acento: #95600b; /* v2.59: un tono más oscuro para que los textos dorados cumplan WCAG AA (antes #b97812) */
  --acento-fuerte: #e0a23a;
  --sobre-acento: #1a1408;
  --ok: #277a4f;
  --error: #c2453a;
  --f-marca: "Bodoni Moda", "Didot", Georgia, serif;
  --f-logo: "Lexend", "Instrument Sans", system-ui, sans-serif; /* v2.59: la palabra «Ludificator», como en la marca Cademico */
  --f-ui: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --radio: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e131d; --superficie: #171e2c; --superficie-2: #1d2535; --tinta: #ece6d8; --tinta-2: #a3a9b6;
    --borde: #2c3547; --acento: #e0a23a; --acento-fuerte: #e0a23a; --sobre-acento: #1a1408; --ok: #79c39a; --error: #e4776a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-family: var(--f-marca); font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
a { color: var(--acento); }
code { background: var(--superficie-2); padding: .1rem .35rem; border-radius: 4px; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
input, textarea { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .55rem .7rem; width: 100%; }
input:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
textarea { resize: vertical; line-height: 1.55; }
label { display: block; font-size: .85rem; font-weight: 500; color: var(--tinta-2); margin-bottom: .3rem; }

.boton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; background: var(--acento-fuerte); color: var(--sobre-acento);
  padding: .65rem 1.2rem; border-radius: var(--radio); font-weight: 600; text-decoration: none; }
.boton:hover:not(:disabled) { filter: brightness(1.06); }
.boton:disabled { opacity: .5; }
.boton.grande { padding: .85rem 1.4rem; }
.boton-sec { display: inline-flex; align-items: center; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); padding: .55rem 1rem; border-radius: var(--radio); text-decoration: none; }
.boton-sec:hover { border-color: var(--tinta-2); }
.enlace { border: 0; background: none; color: var(--acento); padding: .3rem 0; font-weight: 500; }
.enlace:hover { text-decoration: underline; }
.peligro { color: var(--error) !important; }
.sutil { color: var(--tinta-2); font-size: .9rem; margin: 0; }
.eyebrow { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); font-weight: 600; margin: 0 0 .3rem; display: block; }
.aviso { padding: .7rem .9rem; border-radius: 6px; margin: 0; }
.aviso.error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); }
.aviso.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }

/* Barra superior */
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .7rem max(16px, env(safe-area-inset-right, 0px)) .7rem max(16px, env(safe-area-inset-left, 0px));
  background: #121826; color: #ece6d8; border-bottom: 2px solid #e0a23a; }
.marca { font-family: var(--f-logo); font-weight: 600; font-size: 1.3rem; color: inherit; text-decoration: none; letter-spacing: -.02em; }
.marca.grande { font-size: 2.4rem; color: var(--tinta); }
.barra-nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: .9rem; }
.barra-nav a, .barra-nav .enlace { color: #ece6d8; text-decoration: none; }
.barra-nav a:hover, .barra-nav .enlace:hover { color: #e0a23a; text-decoration: none; }
.creditos { background: rgba(224,162,58,.16); color: #f1c977; padding: .25rem .7rem; border-radius: 99px; font-variant-numeric: tabular-nums; text-decoration: none; }
a.creditos:hover { background: rgba(224,162,58,.28); }
.quien { color: #a3a9b6; }

/* Contenido */
.principal { max-width: 980px; margin: 0 auto; padding-block: 1.8rem 6rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 1.4rem; }
.cabecera-vista { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.volver { display: inline-block; margin-bottom: .4rem; text-decoration: none; font-size: .9rem; }
.cargando { color: var(--tinta-2); }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.3rem; display: grid; gap: .9rem; min-width: 0; }

/* Lista de cursos */
.rejilla-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.tarjeta-curso { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.tarjeta-curso:hover { border-color: var(--acento); transform: translateY(-2px); }
.tarjeta-enlace { padding: 1.1rem 1.1rem .6rem; text-decoration: none; color: inherit; display: grid; gap: .35rem; flex: 1; }
.tarjeta-enlace h3 { font-family: var(--f-marca); font-size: 1.3rem; }
.tarjeta-pie { padding: 0 1.1rem .7rem; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 1rem; font-size: .85rem; }
.tarjeta-pie a.enlace { text-decoration: none; display: inline-flex; align-items: center; }
.vacio-grande { background: var(--superficie); border: 1px dashed var(--borde); border-radius: 12px; padding: 2.4rem 1.6rem; display: grid; gap: .8rem; justify-items: start; }
.vacio-grande h2 { font-family: var(--f-marca); font-size: 1.6rem; }
.vacio-grande p { max-width: 60ch; margin: 0; color: var(--tinta-2); }

/* Pasos */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.paso { width: 100%; height: 100%; text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center; padding: .65rem .7rem;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: var(--radio); }
.paso-n { grid-row: span 2; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .85rem; background: var(--superficie-2); border: 1px solid var(--borde); }
.paso-nombre { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.paso-pronto { font-size: .72rem; color: var(--tinta-2); }
.paso.actual { border-color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento-fuerte); }
.paso.actual .paso-n { background: var(--acento-fuerte); color: var(--sobre-acento); border-color: transparent; }
.paso:disabled { opacity: .55; }

/* Paso 1 */
.segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio); padding: 3px; background: var(--superficie-2); justify-self: start; }
.segmento { border: 0; background: transparent; color: var(--tinta-2); padding: .45rem 1rem; border-radius: 6px; font-weight: 500; }
.segmento.activo { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.material { min-height: 18rem; font-size: .95rem; }
.zona-archivo { display: grid; justify-items: center; gap: .3rem; padding: 2.6rem 1rem; border: 2px dashed var(--borde); border-radius: 12px; cursor: pointer; text-align: center; margin: 0; background: var(--superficie-2); }
.zona-archivo.encima, .zona-archivo:hover { border-color: var(--acento); }
.zona-archivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-titulo { font-weight: 600; color: var(--tinta); font-size: 1.05rem; }
.bloque { display: grid; gap: .5rem; }
.pie-material { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--borde); padding-top: 1rem; }
.cuenta { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.coste { margin: .15rem 0 0; color: var(--tinta-2); font-size: .9rem; }
.coste.falta { color: var(--error); }
.progreso { display: grid; gap: .5rem; }
.progreso p { margin: 0; color: var(--tinta-2); font-size: .9rem; }
.progreso-barra { height: 4px; border-radius: 4px; background: var(--superficie-2); overflow: hidden; position: relative; }
.progreso-barra::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--acento-fuerte); border-radius: 4px; animation: avance 1.4s ease-in-out infinite; }
@keyframes avance { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* Paso 2 */
.paso-estructura { display: grid; gap: 1.4rem; }
.campo { display: grid; min-width: 0; }
.lista-objetivos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-objetivos li { display: flex; gap: .5rem; align-items: center; }
.vineta { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 600; color: var(--acento); border: 1px solid var(--acento); }
.icono { flex: none; width: 2rem; height: 2rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-2); border-radius: 6px; font-size: 1rem; line-height: 1; }
.icono:hover { color: var(--tinta); border-color: var(--tinta-2); }
.acciones { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.modulos { display: grid; gap: 1rem; }
.modulo { border: 1px solid var(--borde); border-left: 4px solid var(--acento-fuerte); border-radius: 10px; padding: 1rem; display: grid; gap: .8rem; background: var(--superficie-2); min-width: 0; }
.modulo-cab, .leccion-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.modulo-n { font-family: var(--f-marca); font-weight: 700; font-size: 1.15rem; }
.lecciones { display: grid; gap: .7rem; }
.leccion { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: .8rem; display: grid; gap: .6rem; min-width: 0; }
.barra-pie { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .8rem 1rem; box-shadow: 0 -6px 20px rgba(0,0,0,.08); margin-bottom: env(safe-area-inset-bottom, 0px); }
.estado-guardado { font-size: .88rem; color: var(--tinta-2); }
.estado-guardado.ok { color: var(--ok); }
.estado-guardado.error { color: var(--error); }

/* Acceso e instalación */
.pagina-acceso { min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(ellipse at 30% 20%, #222b40, #0e131d 70%); padding: 2rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); }
.acceso { width: 100%; display: flex; justify-content: center; }
.acceso-caja { width: min(400px, 100%); background: var(--superficie); border-radius: 14px; padding: 2rem 1.6rem; display: grid; gap: 1rem; box-shadow: 0 30px 60px rgba(0,0,0,.4); border-top: 3px solid var(--acento-fuerte); }
.acceso-caja h1 { font-size: 1.5rem; }
.acceso-caja p { margin: 0; }
.lema { color: var(--tinta-2); }
.formulario { display: grid; gap: .3rem; }
.formulario .boton, .formulario .aviso { margin-top: .8rem; }

/* Administración */
.rejilla-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; align-items: end; }
.fin-fila { display: flex; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: .6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .negativo { color: var(--error); }
.tabla .positivo { color: var(--ok); }
.tabla .vacio { color: var(--tinta-2); text-align: center; }
.tabla tr.inactivo td { opacity: .55; }
.recarga { display: flex; gap: .4rem; }
input.corto { width: 5rem; }
input.medio { width: 9rem; }

/* Avisos flotantes */
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: min(560px, calc(100% - 32px));
  background: #121826; color: #ece6d8; padding: .75rem 1.1rem; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); border-left: 4px solid var(--ok); }
.toast.error { border-left-color: #e4776a; }

@media (max-width: 720px) {
  .pasos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .paso { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .5rem .3rem; }
  .paso-n { grid-row: auto; }
  .paso-nombre { font-size: .72rem; }
  .paso-pronto { display: none; }
  .pie-material .boton { width: 100%; }
  .barra-pie { padding: .6rem .7rem; gap: .4rem; }
  .barra-pie .acciones { width: 100%; flex-wrap: nowrap; }
  .barra-pie .acciones > * { flex: 1; justify-content: center; padding-inline: .5rem; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }

/* Paso 3: elecciones */
.elecciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.eleccion { display: grid; gap: .3rem; align-content: start; text-align: left; padding: .9rem; border: 1.5px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); }
.eleccion:hover { border-color: var(--tinta-2); }
.eleccion.elegida { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent); }
.eleccion-nombre { font-weight: 600; }
/* v1.90: tipo de narrativa (expositiva, contextualizada, casos) antes de elegir la narrativa */
.eleccion-narrativa { display: grid; gap: .9rem; }
.narr-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.narr-tipo { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .75rem; row-gap: .25rem; align-content: start; text-align: left; padding: 1rem; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); cursor: pointer; }
.narr-tipo:hover { border-color: var(--tinta-2); }
.narr-tipo.elegida { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent); }
.narr-tipo-icono { grid-row: span 3; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.narr-tipo-icono svg { width: 24px; height: 24px; }
.narr-tipo-nombre { font-weight: 700; font-size: 1.02rem; }
.narr-tipo .sutil { font-size: .84rem; line-height: 1.35; }
.narr-tipo-cuantas { font-size: .78rem; font-weight: 600; color: var(--tinta-2); }
.narr-tipo-pide { margin: .2rem 0 0; font-weight: 600; }
@media (max-width: 760px) { .narr-tipos { grid-template-columns: 1fr; } }
.eleccion .sutil { font-size: .84rem; }
.paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin: .4rem 0 .6rem; }
.paquetes[hidden] { display: none; }
.eleccion.paquete { padding: 1rem 1.1rem; gap: .45rem; }
.paquete-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.paquete-cab .eleccion-nombre { font-size: 1.1rem; }
.etiqueta-rec { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--acento); border: 1px solid currentColor; border-radius: 99px; padding: .1rem .5rem; }
.paquete-precio { font-size: .95rem; color: var(--tinta-2); }
.paquete-precio b { font-size: 1.9rem; color: var(--tinta); margin-right: .1rem; }
.paquete-lista { margin: 0; padding-left: 1.1rem; font-size: .9rem; display: grid; gap: .2rem; }
.paquete-lista li::marker { content: "✓  "; color: var(--ok); }
.eleccion.paquete .falta { color: var(--error); }
.paquete-pie p { margin: 0 0 .6rem; }
.paquete-pie .falta { color: var(--error); }
.muestra { display: flex; height: 34px; border-radius: 6px; overflow: hidden; margin-bottom: .3rem; }
.muestra span { flex: 1; }
.muestra span:first-child { flex: 3; }
.resumen-coste p { margin: 0 0 .3rem; }
.resumen-coste .falta { color: var(--error); }
.piezas { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.piezas li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--superficie-2); }
.pieza-estado { width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--borde); flex: none; }
.piezas li[data-estado="trabajando"] .pieza-estado { border-color: var(--acento); border-top-color: transparent; animation: girar .8s linear infinite; }
.piezas li[data-estado="hecho"] .pieza-estado { background: var(--ok); border-color: var(--ok); }
.piezas li[data-estado="error"] .pieza-estado { background: var(--error); border-color: var(--error); }
.piezas li[data-estado="omitido"] { opacity: .55; }
.piezas li[data-estado="omitido"] > span:nth-child(2) { text-decoration: line-through; }
.pieza-quitado { margin-left: auto; font-size: .85rem; color: var(--tinta-2); }
.pieza-quitar { margin-left: auto; padding: .25rem .7rem; font-size: .85rem; }
.pieza-error { flex-basis: 100%; color: var(--error); font-size: .85rem; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Paso 4: editor visual por bloques. El lienzo imita el papel del curso publicado. */
select { font: inherit; color: var(--tinta); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; padding: .45rem .6rem; justify-self: start; }
.historia-ed > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; list-style-position: inside; }
.historia-ed > summary h2 { display: inline; }
.historia-ed:not([open]) { gap: 0; }
.personajes-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.personaje-editor.abierto { grid-column: 1 / -1; border-color: var(--acento-fuerte); }
.acciones-personaje { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ficha-aspecto { grid-column: 1 / -1; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--borde); }
.aspecto-izq { display: grid; gap: .8rem; align-content: start; }
.aspecto-vista { background: radial-gradient(circle at 50% 35%, #2b3550, #141a28); border: 3px solid #1d1a22; border-radius: 12px; overflow: hidden; aspect-ratio: 220 / 290; }
.aspecto-vista svg { display: block; width: 100%; height: auto; }
.aspecto-vista .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.aspecto-vista .g-neutro, .aspecto-vista[data-gesto="alegre"] .g-alegre, .aspecto-vista[data-gesto="sorpresa"] .g-sorpresa, .aspecto-vista[data-gesto="preocupado"] .g-preocupado, .aspecto-vista[data-gesto="serio"] .g-serio { display: inline; }
.aspecto-vista[data-gesto="alegre"] .g-neutro, .aspecto-vista[data-gesto="sorpresa"] .g-neutro, .aspecto-vista[data-gesto="preocupado"] .g-neutro, .aspecto-vista[data-gesto="serio"] .g-neutro { display: none; }
.aspecto-vista .parpado { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); animation: parpadea 5.2s infinite; }
.aspecto-controles { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; align-content: start; }
.grupo-aspecto { display: grid; gap: .35rem; min-width: 0; }
.imagen-propia { grid-column: 1 / -1; padding: .8rem; border: 1px dashed var(--borde); border-radius: 10px; }
.imagen-propia > p { margin: 0; }
.huecos-gesto { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.hueco-gesto { display: grid; justify-items: center; align-content: center; gap: .2rem; aspect-ratio: 11 / 16; border: 2px dashed var(--borde); border-radius: 8px; cursor: pointer; text-align: center; font-size: .78rem; overflow: hidden; background: var(--superficie-2); }
.hueco-gesto:hover { border-color: var(--acento); }
.hueco-gesto.lleno { border-style: solid; padding: 0 0 .2rem; }
.hueco-gesto img { width: 100%; flex: 1; min-height: 0; object-fit: contain; object-position: bottom; }
.hueco-gesto.apagado { opacity: .45; cursor: not-allowed; }
.hueco-gesto.subiendo { opacity: .5; pointer-events: none; }
.imagen-propia .check { display: inline-flex; gap: .4rem; align-items: center; font-size: .9rem; margin-right: 1rem; }
.aviso-propia:empty { display: none; }
@media (max-width: 520px) { .huecos-gesto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etiqueta-aspecto { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.opciones-aspecto { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.op-aspecto { border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 99px; padding: .3rem .7rem; font-size: .85rem; }
.op-aspecto[aria-pressed="true"] { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: var(--sobre-acento); font-weight: 600; }
.muestras { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.muestra { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--borde); padding: 0; }
.muestra[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--acento-fuerte); transform: scale(1.12); }
.color-libre { width: 34px; height: 30px; padding: 0 2px; border-radius: 6px; cursor: pointer; }
.anadir-personaje { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 100px; border: 1.5px dashed var(--borde); border-radius: 8px; background: none; color: var(--tinta-2); font-weight: 600; }
.anadir-personaje span { font-size: 1.4rem; line-height: 1; color: var(--acento); }
.anadir-personaje:hover { border-color: var(--acento-fuerte); color: var(--tinta); }
@media (max-width: 720px) { .ficha-aspecto { grid-template-columns: 1fr; } .aspecto-izq { max-width: 260px; } .aspecto-controles { grid-template-columns: 1fr; } }
.personaje-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .8rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie-2); }
.personaje-editor > div:last-child { display: grid; gap: .5rem; }

.editor-visual { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.editor-lateral { position: sticky; top: 76px; display: grid; gap: .8rem; }
.editor-lateral > .sutil { font-size: .85rem; margin: 0; }
.capitulos-nav { display: grid; gap: .35rem; }
.capitulos-nav button { display: grid; gap: .1rem; text-align: left; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 8px; padding: .6rem .7rem; }
.capitulos-nav button .eyebrow { margin: 0; font-size: .68rem; }
.capitulos-nav button strong { font-weight: 600; line-height: 1.3; }
.capitulos-nav button .sutil { font-size: .78rem; }
.capitulos-nav button:hover { border-color: var(--tinta-2); }
.capitulos-nav button.activo { border-color: var(--acento-fuerte); box-shadow: inset 3px 0 0 var(--acento-fuerte); }
.capitulos-movil { display: none; width: 100%; margin-bottom: .8rem; }

.lienzo { --papel-ed: #f4eee2; --hoja-ed: #fbf8f1; --letra-ed: #1f1b18; --letra-ed-2: #6a6257; --linea-ed: rgba(31,27,24,.16);
  background: var(--papel-ed); color: var(--letra-ed); border-radius: 12px; padding: 1.6rem clamp(.9rem, 3vw, 2.2rem) 2rem; font-family: "Literata", Georgia, serif; font-size: 16px; line-height: 1.6;
  box-shadow: 0 1px 0 var(--borde), 0 10px 30px rgba(0,0,0,.08); color-scheme: light; }
.lienzo .eyebrow { color: #a3542a; }
.lienzo .sutil { color: var(--letra-ed-2); }
.lienzo .vivo { display: block; width: 100%; border: 1px dashed transparent; background: transparent; color: inherit; font: inherit; line-height: inherit; padding: .2rem .35rem; margin: 0 -.35rem; border-radius: 4px; resize: none; overflow: hidden; }
.lienzo .vivo:hover { border-color: var(--linea-ed); }
.lienzo .vivo:focus { outline: none; border-color: #c28a2c; background: rgba(255,255,255,.55); }
.lienzo .vivo::placeholder { color: #a39a8c; font-style: italic; }
.lienzo-cab { border-bottom: 2px solid var(--letra-ed); padding-bottom: 1rem; margin-bottom: .4rem; display: grid; gap: .3rem; }
.lienzo .lienzo-cab .titulo-cap-ed { font-family: "Bodoni Moda", Georgia, serif; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700; line-height: 1.15; }
.objeto-ed { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .1rem .6rem; align-items: center; color: var(--letra-ed-2); font-size: .9rem; }
.objeto-ed .objeto-icono { width: 22px; height: 22px; color: #a3542a; grid-row: span 2; }
.objeto-ed .objeto-icono svg { width: 100%; height: 100%; }
.lienzo .objeto-ed .objeto-nombre-ed { font-weight: 600; color: var(--letra-ed); }
.lienzo .objeto-ed .objeto-desc-ed { grid-column: 2 / -1; font-size: .88rem; }

.insertar { position: relative; height: 1.6rem; display: grid; align-items: center; }
.insertar-linea { display: flex; justify-content: center; align-items: center; height: 100%; }
.insertar-linea::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed transparent; }
.insertar:hover .insertar-linea::before, .insertar:focus-within .insertar-linea::before { border-color: #c28a2c; }
.insertar-boton { position: relative; z-index: 1; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--linea-ed); background: var(--hoja-ed); color: #a3542a; font-size: 1.1rem; line-height: 1; opacity: .55; transition: opacity .15s, transform .15s; }
.insertar:hover .insertar-boton, .insertar-boton:focus-visible, .insertar-boton[aria-expanded="true"] { opacity: 1; transform: scale(1.1); border-color: #c28a2c; }
.paleta { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .4rem; padding: .6rem; margin: .3rem 0 .6rem; background: #1f1b18; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); font-family: var(--f-ui); }
.insertar:has(.paleta:not([hidden])) { height: auto; }
.paleta-op { display: grid; gap: .1rem; text-align: left; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #f4eee2; border-radius: 8px; padding: .55rem .65rem; }
.paleta-op:hover, .paleta-op:focus-visible { border-color: #e0a23a; background: rgba(224,162,58,.12); }
.paleta-op span { font-size: .78rem; color: #b9b0a2; }

.bloque-ed { position: relative; border: 1px solid transparent; border-radius: 10px; padding: .4rem .5rem .6rem; transition: border-color .15s, background .15s; }
.bloque-ed:hover, .bloque-ed:focus-within { border-color: var(--linea-ed); background: rgba(255,255,255,.35); }
.bloque-ed.arrastrando { opacity: .4; }
.bloque-ed.soltar-antes { box-shadow: 0 -3px 0 #c28a2c; }
.bloque-ed.soltar-despues { box-shadow: 0 3px 0 #c28a2c; }
.bloque-barra { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-bottom: .35rem; font-family: var(--f-ui); opacity: .5; transition: opacity .15s; }
.bloque-ed:hover .bloque-barra, .bloque-ed:focus-within .bloque-barra { opacity: 1; }
.bloque-barra .hueco { flex: 1; }
.bloque-barra .asa { cursor: grab; color: var(--letra-ed-2); font-size: 1.1rem; padding: 0 .2rem; user-select: none; touch-action: none; }
.bloque-barra .tipo-ed { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--letra-ed-2); }
.bloque-ed.es-reto .tipo-ed { color: #a3542a; }
.bloque-barra .icono { width: 1.75rem; height: 1.75rem; font-size: .9rem; background: var(--hoja-ed); color: var(--letra-ed-2); border-color: var(--linea-ed); }
.bloque-barra select.mini, .lienzo select.mini { font-size: .8rem; padding: .2rem .4rem; background: var(--hoja-ed); color: var(--letra-ed); border-color: var(--linea-ed); }

.lienzo .narracion-ed { font-size: 1.08em; font-style: italic; color: var(--letra-ed-2) !important; border-left: 3px solid #e0a23a !important; border-radius: 0 4px 4px 0 !important; padding-left: .9rem !important; margin-left: 0 !important; }
.dialogo-ed { display: flex; gap: .8rem; align-items: flex-start; }
.dialogo-ed.derecha { flex-direction: row-reverse; }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #1b2232; border: 3px solid var(--letra-ed, #1f1b18); }
.avatar.grande { width: 72px; height: 72px; }
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.avatar .g-neutro, .avatar[data-gesto="alegre"] .g-alegre, .avatar[data-gesto="sorpresa"] .g-sorpresa, .avatar[data-gesto="preocupado"] .g-preocupado, .avatar[data-gesto="serio"] .g-serio { display: inline; }
.avatar[data-gesto="alegre"] .g-neutro, .avatar[data-gesto="sorpresa"] .g-neutro, .avatar[data-gesto="preocupado"] .g-neutro, .avatar[data-gesto="serio"] .g-neutro { display: none; }
.avatar .parpado { transform: scaleY(0); }
.globo-ed { flex: 1; min-width: 0; background: var(--hoja-ed); border: 2px solid var(--letra-ed); border-radius: 14px; padding: .6rem .9rem .7rem; box-shadow: 4px 4px 0 var(--letra-ed); }
.globo-ed .quien b { font-family: "Bodoni Moda", Georgia, serif; color: #a3542a; }
.apunte-ed { background: #141a26; color: #ece6d8; border-radius: 8px; padding: 1rem 1.2rem; border-left: 6px solid #e0a23a; display: grid; gap: .2rem; }
.apunte-ed .vivo:focus { background: rgba(255,255,255,.06); }
.apunte-ed .vivo::placeholder { color: #8f96a3; }
.rotulo-ed { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #e0a23a; }
.reto-ed .rotulo-ed { color: #a3542a; }
.lienzo .titulo-ed { font-family: "Bodoni Moda", Georgia, serif; font-size: 1.2rem; font-weight: 700; }
.imagen-zona { display: grid; justify-items: center; gap: .3rem; text-align: center; padding: 2rem 1rem; border: 2px dashed var(--linea-ed); border-radius: 10px; cursor: pointer; color: var(--letra-ed-2); font-family: var(--f-ui); }
.imagen-zona:hover, .imagen-zona.encima { border-color: #c28a2c; background: rgba(224,162,58,.08); }
.imagen-zona.subiendo { opacity: .6; pointer-events: none; }
.zona-icono { font-size: 1.6rem; color: #a3542a; }
.imagen-ed { margin: 0; display: grid; gap: .3rem; }
.imagen-ed img { display: block; width: 100%; height: auto; border-radius: 8px; border: 2px solid var(--letra-ed); }
.lienzo .imagen-ed .pie-ed { font-size: .9rem; font-style: italic; color: var(--letra-ed-2); }
.imagen-cambiar { justify-self: start; font-family: var(--f-ui); font-size: .85rem; cursor: pointer; color: var(--letra-ed); border-color: var(--linea-ed); background: var(--hoja-ed); }
.pizarra-ed { display: grid; gap: .35rem; padding: 1rem 1.2rem; border-radius: 8px; background: #a77b4f; box-shadow: inset 0 0 0 5px #6d4a2b; }
.pizarra-ed > .vivo, .pizarra-ed > .pz-miniatura { background: #f5edd9; color: #2b2218; border-radius: 3px; }
.pizarra-ed .rotulo-ed { color: #fff3dc; }
.lienzo .pizarra-ed .titulo-ed { font-size: 1.4rem; }
.pz-miniatura { display: block; max-width: 100%; max-height: 200px; justify-self: start; padding: 4px; }
.pz-medios { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.pz-medios > * { display: inline-flex; align-items: center; margin: 0; }
.pz-medios .boton-sec, .pz-subir { font-family: var(--f-ui); font-size: .85rem; cursor: pointer; color: var(--letra-ed); border-color: var(--linea-ed); background: var(--hoja-ed); }
.lienzo .pizarra-ed .pz-video-ed { font-family: var(--f-ui); font-size: .9rem; }
.pizarra-ed .pz-aviso { color: #fff3dc; font-family: var(--f-ui); font-size: .85rem; }
.pizarra-ed .pz-aviso.error { color: #ffd9d2; font-weight: 600; }
.pizarra-ed .pz-aviso:empty { display: none; }
.tarjetas-ed { display: grid; gap: .5rem; }
.cartas-ed { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.carta-ed { position: relative; display: grid; grid-template-rows: auto 1fr; border: 2px solid var(--letra-ed); border-radius: 8px; overflow: hidden; box-shadow: 4px 4px 0 var(--letra-ed); background: var(--hoja-ed); }
.lienzo .carta-ed .frente-ed { font-family: "Bodoni Moda", Georgia, serif; font-weight: 700; text-align: center; padding: .7rem .6rem !important; margin: 0 !important; border-radius: 0 !important; }
.lienzo .carta-ed .dorso-ed { background: #141a26 !important; color: #ece6d8; font-size: .9rem; padding: .6rem !important; margin: 0 !important; border-radius: 0 !important; min-height: 4.5rem; }
.carta-ed .icono { position: absolute; top: .25rem; right: .25rem; width: 1.5rem; height: 1.5rem; font-size: .8rem; }
.carta-mas { border: 2px dashed var(--linea-ed); background: transparent; border-radius: 8px; color: #a3542a; min-height: 6rem; font-family: var(--f-ui); }
.reto-ed { background: var(--hoja-ed); border: 2px solid var(--letra-ed); border-radius: 8px; padding: 1rem 1.1rem; box-shadow: 6px 6px 0 #e0a23a; display: grid; gap: .5rem; }
.lienzo .pregunta-ed { font-weight: 600; font-size: 1.05em; }
.lienzo .explicacion-ed { font-size: .92rem; color: var(--letra-ed-2); border-left: 3px solid #2f8a5b !important; border-radius: 0 4px 4px 0 !important; padding-left: .7rem !important; margin-left: 0 !important; }
.opciones-ed { display: grid; gap: .45rem; }
.opcion-ed { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; border: 1.5px solid var(--linea-ed); border-radius: 8px; padding: .45rem .55rem; background: var(--papel-ed); }
.opcion-ed.correcta { border-color: #2f8a5b; background: #e8f4ec; }
.opcion-textos { display: grid; }
.lienzo .opcion-ed .feedback-ed { font-size: .85rem; color: var(--letra-ed-2); }
.marca-ed { display: flex; align-items: center; gap: .4rem; font-family: var(--f-ui); font-size: .8rem; color: var(--letra-ed-2); padding-top: .25rem; }
.marca-ed input { width: auto; margin: 0; }
.opcion-ed.correcta .marca-ed { color: #2f8a5b; font-weight: 600; }
.pasos-ed { margin: 0; padding-left: 1.4rem; display: grid; gap: .35rem; }
.pasos-ed li { display: flex; gap: .3rem; align-items: center; }
.pasos-ed li::marker { color: #a3542a; font-family: var(--f-ui); }
.pasos-ed .vivo { border-color: var(--linea-ed); background: var(--papel-ed); margin: 0; }
.pasos-ed .icono { width: 1.6rem; height: 1.6rem; font-size: .8rem; background: var(--hoja-ed); }
.lienzo .enlace { color: #a3542a; font-family: var(--f-ui); }
.lienzo-pie { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linea-ed); }

/* Paso 5: formato */
.formato-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem; }
.formato-op { display: grid; gap: .2rem; text-align: left; border: 1.5px solid var(--borde); background: var(--superficie-2); color: var(--tinta); border-radius: 10px; padding: .8rem 1rem; }
.formato-op span { font-size: .85rem; color: var(--tinta-2); }
.formato-op.activo { border-color: var(--acento-fuerte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-fuerte) 25%, transparent); }

/* Paso 5: exportar */
.cabecera-panel { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.vista-previa { width: 100%; height: min(72vh, 680px); border: 0; border-radius: 10px; background: #0e131d; }
.formatos { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.formatos .pronto { color: var(--tinta-2); }

@media (max-width: 860px) {
  .editor-visual { grid-template-columns: 1fr; }
  .editor-lateral { display: none; }
  .capitulos-movil { display: block; }
}
@media (max-width: 560px) {
  .opcion-ed { grid-template-columns: 1fr auto; }
  .opcion-ed .marca-ed { grid-column: 1 / -1; }
  .avatar { width: 48px; height: 48px; }
  .lienzo { padding: 1rem .7rem 1.4rem; }
}

/* Compra de créditos */
.saldo { margin: 0; color: var(--tinta-2); }
.saldo b { font-family: var(--f-marca); font-size: 2rem; color: var(--tinta); margin-right: .25rem; font-variant-numeric: tabular-nums; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.pack { position: relative; display: grid; gap: .35rem; align-content: start; border: 1.5px solid var(--borde); background: var(--superficie-2); border-radius: 12px; padding: 1.2rem 1.1rem 1.1rem; }
.pack.destacado { border-color: var(--acento-fuerte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-fuerte) 22%, transparent); background: var(--superficie); }
.pack-etiqueta { position: absolute; top: -.7rem; left: 1rem; background: var(--acento-fuerte); color: var(--sobre-acento); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 99px; }
.pack h3 { font-size: .95rem; color: var(--tinta-2); font-weight: 600; }
.pack-creditos { margin: 0; }
.pack-creditos b { font-family: var(--f-marca); font-size: 2.2rem; line-height: 1; }
.pack-precio { margin: 0; font-size: 1.25rem; font-weight: 600; }
.pack .sutil { font-size: .82rem; margin-bottom: .5rem; }
.pack button { width: 100%; justify-content: center; }
/* v1.27: varias formas de pago por pack */
.pack-pagar { margin: .2rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); }
.pack-metodos { display: grid; gap: .4rem; }
.pago-seguro { font-size: .82rem; }

/* Registro y cuenta */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 3px; }
.pestanas button { border: 0; background: none; color: var(--tinta-2); padding: .5rem; border-radius: 7px; font-weight: 500; }
.pestanas button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.regalo { background: color-mix(in srgb, var(--acento-fuerte) 14%, transparent); border-radius: 8px; padding: .65rem .8rem; margin-bottom: .4rem !important; font-size: .92rem; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario .olvido { justify-self: center; margin-top: .4rem; font-size: .88rem; color: var(--tinta-2); }
.formulario h1 { margin-bottom: .2rem; }
.franja-aviso { background: color-mix(in srgb, var(--acento-fuerte) 18%, var(--superficie)); color: var(--tinta); text-align: center; padding: .6rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--borde); }
.franja-aviso .enlace { color: var(--acento); text-decoration: underline; }

/* Portada pública */
.pagina-portada { background: #0e131d; color: #ece6d8; --tinta: #ece6d8; --tinta-2: #a3a9b6; --superficie: #171e2c; --superficie-2: #1d2535; --borde: #2c3547; --acento: #e0a23a; color-scheme: dark; }
.portada-barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .8rem max(16px, calc((100vw - 1120px) / 2)); background: rgba(14,19,29,.86); backdrop-filter: blur(10px); border-bottom: 1px solid #222b3d; }
.boton.pequeno { padding: .4rem .9rem; font-size: .88rem; color: var(--sobre-acento) !important; }
.boton-fantasma { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #4a5468; color: #ece6d8; border-radius: var(--radio); padding: .55rem 1rem; text-decoration: none; font-weight: 600; }
.boton-fantasma:hover { border-color: #e0a23a; color: #e0a23a; }
.boton-fantasma.grande { padding: .85rem 1.4rem; }
a.boton { text-decoration: none; }
.portada { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.heroe { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding: 4.5rem 0 4rem; }
.heroe h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }
.heroe h1 em { color: #e0a23a; font-style: italic; }
.heroe-sub { font-size: 1.12rem; color: #c3c7d0; max-width: 52ch; margin: 1.2rem 0 1.8rem; }
.heroe-acciones { display: flex; gap: .7rem; flex-wrap: wrap; }
.heroe-nota { color: #a3a9b6; font-size: .9rem; margin: 1rem 0 0; }
.heroe-vineta { position: relative; aspect-ratio: 4 / 3.4; border-radius: 18px; overflow: hidden; border: 3px solid #1d1a22; box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px #2c3547; transform: rotate(1.2deg); }
.vineta-fondo { position: absolute; inset: 0; }
.vineta-fondo svg { display: block; width: 100%; height: 100%; }
.heroe .vineta-retrato { position: absolute; left: 4%; bottom: -4%; width: 46%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.vineta-retrato svg { display: block; width: 100%; height: auto; }
.vineta-globo { position: absolute; right: 5%; top: 9%; width: 50%; background: #fffdf6; color: #1d1a22; font-family: "Literata", Georgia, serif; font-size: clamp(.85rem, 1.6vw, 1.02rem); line-height: 1.35;
  padding: .9rem 1rem; border: 3px solid #1d1a22; border-radius: 18px 18px 18px 4px; box-shadow: 5px 5px 0 #1d1a22; }
.vineta-reto { position: absolute; right: 5%; bottom: 8%; width: 50%; background: #1d1a22; color: #ece6d8; border: 2px solid #e0a23a; border-radius: 12px; padding: .7rem .9rem; font-weight: 600; font-size: .95rem; }
.vineta-reto span { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #e0a23a; margin-bottom: .2rem; }
.seccion { padding: 3.5rem 0; border-top: 1px solid #1f2738; }
.seccion-cab { max-width: 62ch; margin-bottom: 2rem; }
.seccion-cab h2 { font-family: var(--f-marca); font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 700; margin-bottom: .6rem; }
.seccion-cab .sutil { font-size: 1rem; }
.ejemplos { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; }
.ejemplo { grid-column: span 4; }
.ejemplo:nth-child(n+4) { grid-column: span 3; }
.ejemplo:nth-child(n+4) .ejemplo-texto h3 { font-size: 1.15rem; }
.ejemplo { display: grid; grid-template-rows: auto 1fr; background: #171e2c; border: 1px solid #2c3547; border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, border-color .2s; }
.ejemplo:hover { transform: translateY(-4px); border-color: #e0a23a; }
.ejemplo-imagen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid #1d1a22; }
.ejemplo-imagen .vineta-retrato { position: absolute; left: 50%; bottom: -30%; width: 52%; transform: translateX(-50%); filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.ejemplo-texto { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .5rem; align-content: start; }
.ejemplo-texto h3 { font-family: var(--f-marca); font-size: 1.3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.chips span { font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .15rem .55rem; border-radius: 99px; background: #232c3f; color: #c3c7d0; }
.chips span:first-child { background: rgba(224,162,58,.18); color: #f1c977; }
.ejemplo-jugar { color: #e0a23a; font-weight: 600; margin-top: .3rem; }
.pasos-portada { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.pasos-portada li { counter-increment: paso; display: grid; gap: .35rem; align-content: start; padding: 1.1rem; background: #171e2c; border: 1px solid #2c3547; border-radius: 12px; }
.pasos-portada li::before { content: counter(paso); font-family: var(--f-marca); font-size: 2rem; color: #e0a23a; line-height: 1; }
.pasos-portada span { color: #a3a9b6; font-size: .9rem; }
.formatos-portada { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.formatos-portada > * { display: grid; gap: .4rem; align-content: start; padding: 1.2rem; border-radius: 12px; background: linear-gradient(160deg, #1d2535, #151b28); border: 1px solid #2c3547; color: inherit; text-decoration: none; }
.formatos-portada a:hover { border-color: #e0a23a; }
.formatos-portada b { font-size: 1.05rem; }
.formatos-portada span { color: #a3a9b6; font-size: .9rem; }
.pagina-portada .pack { background: #171e2c; }
.pagina-portada .pack a { width: 100%; justify-content: center; margin-top: .6rem; }
.cierre-portada { text-align: center; padding: 4rem 0 5rem; border-top: 1px solid #1f2738; display: grid; gap: 1.4rem; justify-items: center; }
.cierre-portada h2 { font-family: var(--f-marca); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.pie-portada { text-align: center; color: #6b7385; font-size: .85rem; padding: 1.5rem 16px 2.5rem; }
@media (max-width: 900px) {
  .heroe { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 2.2rem; }
  .ejemplos { grid-template-columns: 1fr; }
  .ejemplo, .ejemplo:nth-child(n+4) { grid-column: auto; }
  .pasos-portada { grid-template-columns: 1fr 1fr; }
  .formatos-portada { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .portada-barra .barra-nav a:not(.boton):not([href="entrar.php"]) { display: none; }
  .pasos-portada, .formatos-portada { grid-template-columns: 1fr; }
  .heroe-vineta { transform: none; }
}
.vineta-retrato .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.vineta-retrato .g-neutro, .vineta-retrato[data-gesto="alegre"] .g-alegre, .vineta-retrato[data-gesto="sorpresa"] .g-sorpresa, .vineta-retrato[data-gesto="preocupado"] .g-preocupado, .vineta-retrato[data-gesto="serio"] .g-serio { display: inline; }
.vineta-retrato[data-gesto="alegre"] .g-neutro, .vineta-retrato[data-gesto="sorpresa"] .g-neutro, .vineta-retrato[data-gesto="preocupado"] .g-neutro, .vineta-retrato[data-gesto="serio"] .g-neutro { display: none; }
.vineta-retrato .parpado { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); animation: parpadea 5.2s infinite; }
@keyframes parpadea { 0%, 94%, 100% { transform: scaleY(0); } 96.5% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .vineta-retrato .parpado { animation: none; } }

/* Colores de cada tema en las viñetas de la portada (los mismos que en el reproductor) */
[data-tema] > .vineta-fondo { --tinta: #0e131d; --noche: #182033; --muro: #222b40; --ambar: #e0a23a; }
[data-tema="magia"] > .vineta-fondo { --tinta: #120d20; --noche: #1f1736; --muro: #2b2148; --ambar: #dcb85e; }
[data-tema="explorador"] > .vineta-fondo { --tinta: #111a15; --noche: #1b2b22; --muro: #243a2d; --ambar: #e6a64c; }
[data-tema="espacio"] > .vineta-fondo { --tinta: #0a0f1f; --noche: #121a33; --muro: #1a2546; --ambar: #5fd3e6; }
[data-tema="piratas"] > .vineta-fondo { --tinta: #0c1a20; --noche: #13282f; --muro: #1c3a42; --ambar: #e9b949; }
[data-tema="tiempo"] > .vineta-fondo { --tinta: #17120c; --noche: #2a2016; --muro: #3a2c1e; --ambar: #d9a441; --hilo: #3fa7a0; }
[data-tema="neutra"] > .vineta-fondo { --tinta: #0f151c; --noche: #17202a; --muro: #22303e; --ambar: #5ab4dc; --hilo: #f0a04b; }
[data-tema="heroes"] > .vineta-fondo { --tinta: #0d1020; --noche: #1a1f3d; --muro: #252c55; --ambar: #ffd23f; --hilo: #e63946; }

/* Publicar con enlace */
.publicar-cuerpo, .publicar-cuerpo > div { display: grid; gap: .7rem; }
.fila-enlace { display: flex; gap: .5rem; flex-wrap: wrap; }
.enlace-publico { flex: 1 1 280px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88rem; background: var(--superficie-2); }

/* v0.14 Resultados del alumnado */
.panel-resultados .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.cifra { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem; display: grid; gap: .1rem; }
.cifra b { font-family: var(--f-marca); font-size: 2rem; line-height: 1; color: var(--tinta); }
.cifra span { color: var(--tinta-2); font-size: .85rem; }
.panel-resultados .tabla td.sutil { color: var(--tinta-2); font-style: italic; }
.etiqueta { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--tinta-2); white-space: nowrap; }
.etiqueta.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.retos-dificiles { margin: 1.4rem 0 1rem; }
.retos-dificiles h3 { margin-bottom: .6rem; }
.retos-dificiles ol { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .55rem; }
.retos-dificiles li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 3.2rem; gap: .8rem; align-items: center; padding: .55rem .7rem; background: var(--superficie-2); border-radius: var(--radio); }
.reto-texto { display: grid; min-width: 0; }
.reto-texto span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reto-texto .sutil { font-size: .78rem; }
.reto-barra { height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.reto-barra i { display: block; height: 100%; background: var(--acento-fuerte); border-radius: inherit; }
.reto-tasa { text-align: right; font-variant-numeric: tabular-nums; }
.interruptor { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; cursor: pointer; }
.interruptor input { margin-top: .25rem; accent-color: var(--acento); }
.vacio-resultados { padding: 1.4rem; text-align: center; color: var(--tinta-2); border: 1px dashed var(--borde); border-radius: var(--radio); }
@media (max-width: 600px) {
  .panel-resultados .cifras { gap: .5rem; }
  .cifra { padding: .7rem; }
  .cifra b { font-size: 1.5rem; }
  .retos-dificiles li { grid-template-columns: minmax(0, 1fr) 2.8rem; }
  .reto-barra { grid-column: 1 / -1; grid-row: 2; }
  .reto-texto span:last-child { white-space: normal; }
}
.panel > *, .paso-exportar > * { min-width: 0; }
label.interruptor { display: flex; font-size: .92rem; color: var(--tinta); margin: 1rem 0; }
label.interruptor input { width: auto; flex: none; padding: 0; }
label.interruptor + label.interruptor { margin-top: -1rem; }

/* v0.15 Retos nuevos en el editor */
.vf-ed, .parejas-ed { display: grid; gap: .4rem; }
.vf-fila-ed { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; border: 1.5px solid var(--linea-ed); border-radius: 8px; padding: .4rem .5rem; background: var(--papel-ed); }
.vf-marca { font: 600 .8rem var(--f-ui); border-radius: 99px; padding: .3rem .6rem; border: 1.5px solid; cursor: pointer; }
.vf-marca.v { color: #2f8a5b; border-color: #2f8a5b; background: #e8f4ec; }
.vf-marca.f { color: #b0412f; border-color: #b0412f; background: #f8e9e6; }
.pareja-ed { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr) auto; gap: .4rem; align-items: center; }
.une-ed { color: var(--letra-ed-2); font-weight: 700; }
.huecos-muestra { margin: 0; padding: .6rem .8rem; border: 1px dashed var(--linea-ed); border-radius: 8px; line-height: 1.9; color: var(--letra-ed); }
.huecos-muestra mark { background: #fbe7bd; color: #6b4410; border-bottom: 2px solid #e0a23a; padding: 0 .3rem; border-radius: 4px; }
@media (max-width: 600px) {
  .vf-fila-ed { grid-template-columns: minmax(0, 1fr) auto; }
  .vf-fila-ed .vf-marca { grid-column: 1 / -1; justify-self: start; }
  .pareja-ed { grid-template-columns: minmax(0, 1fr) auto; }
  .pareja-ed .une-ed { display: none; }
}
@media (max-width: 600px) {
  .pareja-ed > input:first-child { grid-column: 1; grid-row: 1; }
  .pareja-ed > input:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .pareja-ed > :last-child { grid-column: 2; grid-row: 1 / span 2; }
}
.pareja-ed input.vivo { background: var(--papel-ed); border: 1.5px solid var(--linea-ed); border-radius: 8px; padding: .35rem .55rem; }

/* v0.17 Diploma */
.diploma-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.diploma-campos label span { display: block; margin-bottom: .3rem; }
.diploma-campos .interruptor { grid-column: 1 / -1; }
.diploma-campos .interruptor span { display: inline; margin: 0; }
@media (max-width: 700px) { .diploma-campos { grid-template-columns: 1fr; } }

/* v0.19 · Empezar desde un ejemplo */
.zona-ejemplos { margin-top: 1rem; min-width: 0; }
.ejemplos-caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 1.2rem 1.4rem; }
.ejemplos-caja > summary { cursor: pointer; display: grid; gap: .2rem; list-style: none; position: relative; padding-right: 2rem; }
.ejemplos-caja > summary::-webkit-details-marker { display: none; }
.ejemplos-caja > summary::after { content: "▾"; position: absolute; right: .2rem; top: .3rem; font-size: 1.2rem; color: var(--tinta-2); transition: transform .2s; }
.ejemplos-caja:not([open]) > summary::after { transform: rotate(-90deg); }
.ejemplos-caja > summary h2 { font-family: var(--f-marca); font-size: 1.4rem; margin: 0; }
.rejilla-ejemplos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.rejilla-ejemplos > * { min-width: 0; }
.tarjeta-ejemplo { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: var(--superficie); transition: transform .15s, box-shadow .15s; }
.tarjeta-ejemplo:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.ejemplo-cabecera { position: relative; height: 120px; background: radial-gradient(circle at 75% 20%, var(--c2) 0 8%, transparent 9%), linear-gradient(135deg, var(--c1) 55%, var(--c3)); display: flex; justify-content: center; align-items: flex-end; }
.ejemplo-retrato { width: 110px; height: 110px; }
.ejemplo-retrato svg { width: 100%; height: 100%; display: block; }
.ejemplo-chip { position: absolute; top: .6rem; left: .6rem; background: rgba(255,255,255,.92); color: #222; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 99px; }
.ejemplo-cuerpo { padding: .9rem 1rem .4rem; display: grid; gap: .25rem; flex: 1; }
.ejemplo-cuerpo h3 { margin: 0; font-size: 1.05rem; }
.ejemplo-cuerpo p { margin: 0; font-size: .88rem; }
.tarjeta-ejemplo .tarjeta-pie { padding: .4rem 1rem 1rem; }
.tarjeta-ejemplo .boton { width: 100%; }
.ejemplo-retrato .gestos > g { display: none; }
.ejemplo-retrato .gestos > g.g-alegre { display: inline; }

/* v0.20 · Idioma del curso */
.panel-idioma { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.panel-idioma > div { flex: 1 1 280px; min-width: 0; }
.selector-idioma { font: inherit; font-size: 1rem; padding: .55rem 2rem .55rem .8rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: inherit; min-width: 180px; }

/* v0.21 · Reescribir con la IA */
.ia-titulo { font-size: 1rem; margin: 0 0 .2rem; font-family: var(--f-ui); }
.lienzo-pie > .sutil { margin: 0 0 .7rem; font-family: var(--f-ui); font-size: .88rem; }
.ia-panel { display: grid; gap: .55rem; font-family: var(--f-ui); background: rgba(255,255,255,.55); border: 1px solid var(--linea-ed); border-radius: 10px; padding: .75rem; margin: .2rem 0 .6rem; }
.lienzo-pie .ia-panel { margin: 0; }
.ia-entrada { font: inherit; font-size: .95rem; width: 100%; box-sizing: border-box; padding: .55rem .7rem; border-radius: 8px; border: 1px solid var(--linea-ed); background: #fff; color: #1d1a22; }
.ia-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ia-chip { font: inherit; font-size: .8rem; padding: .25rem .65rem; border-radius: 99px; border: 1px solid var(--linea-ed); background: #fff; color: #4a4250; cursor: pointer; }
.ia-chip:hover { border-color: #c28a2c; color: #1d1a22; }
.ia-acciones { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.bloque-barra .icono.ia { color: #b07a1f; font-size: .95rem; }
.ia-hecho { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-family: var(--f-ui); font-size: .85rem; color: #6b4f12; background: #fbf1d9; border-radius: 8px; padding: .3rem .7rem; margin-bottom: .4rem; }
.ia-hecho .enlace { font-size: .85rem; padding: 0; }

/* v0.22 · Escenario de capítulo y portada */
.etiqueta-campo { display: block; font-size: .85rem; font-weight: 500; color: var(--tinta-2); margin-bottom: .3rem; }
.selector-fondo { grid-column: 1 / -1; margin-top: .8rem; font-family: var(--f-ui); }
.fondo-fila { display: flex; align-items: center; gap: .8rem; }
.fondo-actual { width: 128px; aspect-ratio: 16 / 9; flex: none; padding: 0; border: 2px solid #1d1a22; border-radius: 8px; overflow: hidden; cursor: pointer; background: #222; }
.fondo-actual svg, .fondo-actual img, .fondo-mini svg, .fondo-mini img { width: 100%; height: 100%; display: block; }
.fondo-texto { display: grid; gap: .05rem; justify-items: start; }
.fondo-nombre { font-weight: 600; font-size: .95rem; color: #1d1a22; }
.historia-ed .fondo-nombre { color: var(--tinta); }
.fondo-texto .enlace { padding: 0; font-size: .88rem; }
.fondos-panel { margin-top: .7rem; padding: .8rem; border: 1px solid var(--linea-ed, var(--borde)); border-radius: 10px; background: rgba(255,255,255,.6); display: grid; gap: .6rem; }
.fondos-panel .sutil { margin: 0; font-size: .8rem; }
.fondos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .55rem; }
.fondo-op { display: grid; gap: .25rem; padding: .25rem; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: .78rem; color: #3a3440; text-align: center; }
.fondo-op:hover { border-color: #d8c8a8; }
.fondo-op.elegido { border-color: #c28a2c; background: #fbf1d9; }
.fondo-mini { display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: #2a2630; }
.fondo-mini.vacio { display: grid; place-items: center; font-size: 1.6rem; color: #c28a2c; background: #fff; border: 2px dashed #d8c8a8; box-sizing: border-box; }
.fondos-mas summary { cursor: pointer; font-size: .85rem; color: var(--acento); margin-bottom: .4rem; }

/* v0.23 · Reutilizar personajes */
.eleccion.reparto { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: .7rem; align-items: center; text-align: left; }
.eleccion.reparto .reparto-retrato { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #2b3550; display: block; }
.eleccion.reparto .reparto-retrato svg { width: 100%; height: 100%; display: block; }
.eleccion.reparto .reparto-retrato.nuevo { display: grid; place-items: center; font-size: 1.6rem; color: var(--acento); background: var(--superficie); border: 2px dashed var(--borde); box-sizing: border-box; }
.eleccion.reparto .reparto-retrato .gestos > g { display: none; }
.eleccion.reparto .reparto-retrato .gestos > g.g-neutro { display: inline; }
.nota-reparto { margin: .7rem 0 0; }
.elecciones.repartos { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* v1.25: igual que otro curso */
.elecciones.gemelos { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.eleccion.gemelo { display: grid; align-content: start; gap: .25rem; text-align: left; padding: 0 0 .7rem; overflow: hidden; }
.eleccion.gemelo > .eleccion-nombre, .eleccion.gemelo > .sutil { padding: 0 .8rem; }
.eleccion.gemelo .eleccion-nombre { margin-top: .5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eleccion.gemelo .portada-curso { height: 92px; pointer-events: none; }
.gemelo-nuevo { display: grid; place-items: center; height: 92px; font-size: 1.8rem; color: var(--acento); background: var(--superficie-2); border-bottom: 1px dashed var(--borde); }
.panel-gemelo .otros-repartos { margin-top: .8rem; }
.paneles-apariencia { display: grid; gap: 1rem; }
.copiar-aspecto-fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0 .8rem; }
.copiar-aspecto-fila select { flex: 1 1 220px; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; }

/* v0.28: «Busca en la imagen» en el editor */
.buscar-ed { position: relative; width: fit-content; max-width: 100%; line-height: 0; cursor: crosshair; justify-self: start; }
.buscar-ed img { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; border: 2px solid var(--letra-ed); user-select: none; }
.zona-marca { position: absolute; aspect-ratio: 1; min-width: 18px; transform: translate(-50%, -50%); border: 3px solid #2f8a57; border-radius: 50%; background: rgba(47, 138, 87, .18); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.zona-marca b { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; background: #2f8a57; color: #fff; font: 700 11px/20px system-ui, sans-serif; text-align: center; }
.zonas-ed { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.zona-num { width: 22px; height: 22px; border-radius: 50%; background: #2f8a57; color: #fff; font: 700 11px/22px system-ui, sans-serif; text-align: center; }
.zonas-ed:empty { display: none; }
.zonas-ed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; }
.zona-tam { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--letra-ed-2); }
.zona-tam input { width: 110px; padding: 0; }
@media (max-width: 600px) { .zonas-ed li { grid-template-columns: auto minmax(0, 1fr) auto; } .zona-tam { grid-column: 2; } }

/* v0.29: glosario en el editor */
.glosario-panel .acciones-glosario { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin: .8rem 0; }
.glosario-ed { display: grid; gap: .5rem; }
.termino-ed { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto; gap: .6rem; align-items: start; padding: .5rem 0; border-top: 1px dashed var(--borde); }
.termino-ed .termino-nombre { font-weight: 700; }
.fichas-ed { display: grid; gap: 1rem; }
.fichas-cap-ed { display: grid; gap: .4rem; justify-items: start; padding-top: .7rem; border-top: 1px dashed var(--borde); }
.fichas-cap-ed h3 { margin: 0; font-size: 1rem; }
.ideas-ed { display: grid; gap: .35rem; width: 100%; }
.idea-ed { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: start; }
.idea-num { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #f3c969; color: #2b2210; font-weight: 700; font-size: .85rem; margin-top: .35rem; }
.ideas-respaldo { margin: 0; }
@media (max-width: 640px) { .termino-ed { grid-template-columns: minmax(0, 1fr) auto; } .termino-ed .termino-def { grid-column: 1 / -1; } }

/* v0.32: probar desde aquí */
.lienzo-cab .probar-cap { justify-self: start; margin-top: .4rem; }
.bloque-barra .probar { color: #c2410c; }
/* v0.33: instalador */
.acceso-caja.instalar { width: min(520px, 100%); }
.acceso-caja.instalar h2 { font-size: 1.05rem; margin: .8rem 0 0; }
.requisitos { list-style: none; margin: 0; padding: .7rem .9rem; display: grid; gap: .25rem; font-size: .9rem; background: rgba(127,127,127,.08); border-radius: 10px; }
.requisitos .ok { color: #2f8f5b; }
.requisitos .mal { color: #c0392b; font-weight: 600; }

/* v0.35: voz preferida y colores de marca */
.voz-elegir { display: grid; gap: .35rem; margin: -.4rem 0 1rem 3.2rem; }
.voz-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.voz-fila select { flex: 1; min-width: 12rem; font: inherit; padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--borde, #ccc); background: var(--superficie, #fff); color: inherit; }
.colores-marca { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--borde); justify-items: start; }
.colores-marca h3 { margin: 0; font-size: 1rem; }
.colores-fila { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.color-campo { display: flex; gap: .6rem; align-items: center; cursor: pointer; max-width: 20rem; }
.color-campo input { width: 44px; height: 44px; padding: 0; border: 1px solid var(--borde, #ccc); border-radius: 10px; background: none; cursor: pointer; }
.color-campo.sin input { opacity: .45; }
.color-campo > span { display: grid; }
@media (max-width: 640px) { .voz-elegir { margin-left: 0; } }

/* v0.39: instrucciones para la IA (Administración) y capítulo nuevo (editor) */
.ia-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .8rem 1rem; margin: .6rem 0 1rem; }
.campo-ia { display: grid; gap: .3rem; }
.campo-ia label { font-weight: 600; font-size: .92rem; }
.campo-ia textarea { width: 100%; font: inherit; font-size: .92rem; }
.campo-ia:first-child { grid-column: 1 / -1; }
.anadir-cap { border: 1.5px dashed var(--borde) !important; color: var(--acento); font-weight: 600; justify-content: center; }
.form-capitulo { display: grid; gap: .8rem; }
.form-capitulo h2 { margin: 0; }
.form-capitulo textarea, .form-capitulo input { width: 100%; }
.quitar-cap { font-size: .85rem; }

/* v0.40 · doblaje: grabar la voz de cada bloque */
.bloque-barra .icono.voz { filter: grayscale(1); opacity: .55; font-size: .9rem; }
.bloque-barra .icono.voz.con-voz { filter: none; opacity: 1; background: #fbe3e3; border-radius: 6px; }
.voz-panel { font-family: var(--f-ui); background: #f7f3ec; border: 1px solid #e6dccb; border-radius: 10px; padding: .6rem .8rem; margin-bottom: .5rem; display: grid; gap: .5rem; }
.voz-panel .sutil { margin: 0; font-size: .85rem; }
.voz-panel audio { width: 100%; height: 36px; }
.voz-acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.voz-acciones .hueco { flex: 1; }
.voz-acciones .boton, .voz-acciones .boton-sec { padding: .35rem .8rem; font-size: .85rem; }
.voz-acciones .boton.grabando { background: #c62828; color: #fff; border-color: #c62828; animation: latido-voz 1.2s ease-in-out infinite; }
@keyframes latido-voz { 50% { box-shadow: 0 0 0 6px rgba(198, 40, 40, .18); } }
.voz-acciones .enlace.peligro { color: #b3261e; }

/* v0.41 · Monetización en Administración */
.mon-interruptor { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; cursor: pointer; }
.mon-interruptor input { width: 1.2rem; height: 1.2rem; accent-color: var(--ambar, #e0a23a); }
.mon-resto { transition: opacity .2s; }
.mon-resto.apagado { opacity: .45; }
.mon-resto h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; }
.mon-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1.2rem; }
.mon-rejilla.ancha { grid-template-columns: 2fr 2fr 1fr; }
@media (max-width: 720px) { .mon-rejilla.ancha { grid-template-columns: 1fr; } }
.mon-campo { display: grid; gap: .25rem; font-size: .88rem; }
.mon-campo input, .mon-campo select { width: 100%; }
.mon-tabla { margin-bottom: .5rem; }
.mon-tabla td.centro { text-align: center; }
.mon-tabla input.medio { min-width: 12rem; }
.sin-cobro { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; white-space: nowrap; cursor: pointer; }
.pack-precio small { font-size: .55em; font-weight: 400; opacity: .7; }

/* v0.42 · Aspecto del curso */
.panel-aspecto h3 { font-size: .95rem; margin: 1.3rem 0 .5rem; }
.paletas { display: flex; flex-wrap: wrap; gap: .5rem; }
.paleta { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #e3dccf; background: #fff; border-radius: 999px; padding: .25rem .75rem .25rem .3rem; font: 500 .85rem var(--f-ui); cursor: pointer; }
.paleta.elegida, .aspecto-op.elegida { border-color: #c98f22; box-shadow: 0 0 0 2px rgba(227, 169, 69, .35); }
.paleta-muestra { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.1); }
.paleta-muestra.narrativa { background: conic-gradient(#e0a23a 0 25%, #2f7cf6 0 50%, #2fa865 0 75%, #8a5cf0 0); }
.panel-aspecto .colores-marca { margin-top: .8rem; }
.aspecto-ops { display: flex; flex-wrap: wrap; gap: .5rem; }
.aspecto-op { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #e3dccf; background: #fff; border-radius: 10px; padding: .4rem .8rem; font: 500 .85rem var(--f-ui); cursor: pointer; }
.aspecto-muestra { font-size: 1.25rem; line-height: 1; color: #1d2433; }
.aspecto-logo { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.logo-vista { max-height: 56px; max-width: 160px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; padding: 4px; }

/* v0.43 · Narrativas en Administración */
.narr-lista { display: grid; gap: .6rem; margin: 1rem 0; }
.narr-ficha { border: 1px solid #e6dccb; border-radius: 10px; padding: .7rem .9rem; background: #fff; display: grid; gap: .6rem; }
.narr-ficha.apagada { opacity: .55; }
.narr-ficha.nueva { border-color: #c98f22; background: #fffaf0; }
.narr-ficha h3, .narr-ficha h4 { margin: .2rem 0; font-size: .95rem; }
.narr-cab { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.narr-cab .hueco { flex: 1; }
.narr-cuerpo { display: grid; gap: .7rem; padding-top: .4rem; border-top: 1px dashed #e6dccb; }
.narr-cuerpo textarea, .narr-ficha textarea, .narr-ficha input[type=text], .narr-ficha select { width: 100%; }
.narr-acciones { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }

/* v0.44 Diseñador de personajes: pestañas, opciones con miniatura y personajes listos */
.ficha-aspecto .aspecto-controles { display: flex; flex-direction: column; gap: .8rem; }
.aspecto-izq { display: grid; gap: .6rem; align-content: start; }
.pestanas-aspecto { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--borde); padding-bottom: .4rem; }
.pestana-boton { border: 0; background: none; color: var(--tinta-suave, var(--tinta)); padding: .4rem .7rem; border-radius: 8px; font-size: .9rem; cursor: pointer; }
.pestana-boton:hover { background: var(--superficie); }
.pestana-boton[aria-selected="true"] { background: var(--acento-fuerte); color: var(--sobre-acento); font-weight: 600; }
.pestana-aspecto { display: grid; gap: .9rem; min-width: 0; }
.opciones-visuales { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .45rem; }
.op-visual, .plantilla-personaje { display: grid; gap: .2rem; padding: .3rem; border: 2px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--tinta); cursor: pointer; text-align: center; font-size: .78rem; line-height: 1.15; }
.op-visual:hover, .plantilla-personaje:hover { border-color: var(--acento-fuerte); transform: translateY(-1px); }
.op-visual[aria-pressed="true"] { border-color: var(--acento-fuerte); box-shadow: 0 0 0 2px var(--acento-fuerte); font-weight: 600; }
.op-dibujo { display: block; background: radial-gradient(circle at 50% 35%, #2b3550, #141a28); border-radius: 7px; overflow: hidden; }
.op-dibujo svg { display: block; width: 100%; height: auto; }
.op-dibujo .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.op-dibujo .parpado { transform-box: fill-box; transform: scaleY(0); }
.galeria-personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; max-height: 470px; overflow-y: auto; padding: .15rem; }
.plantilla-personaje .op-dibujo { aspect-ratio: 180 / 250; }

/* v0.45 Personajes en 3D */
.aspecto-vista.en-3d { cursor: grab; touch-action: pan-y; }
.aspecto-vista.en-3d:active { cursor: grabbing; }
.aspecto-vista canvas.visor-3d { display: block; width: 100%; height: auto; }
.op-dibujo.op-3d { position: relative; aspect-ratio: 150 / 216; display: grid; place-items: center; }
.op-dibujo.op-3d img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-dibujo.op-3d img:not([src]) { visibility: hidden; }
.op-dibujo.op-3d b { position: absolute; font-size: 1.4rem; color: #fff; letter-spacing: .05em; }
.estado-3d { min-height: 1.2em; margin: 0; font-size: .82rem; }

/* v0.46 Aspecto visual de cada narrativa (Administración) */
.narr-aspecto { display: grid; gap: .6rem; border-top: 1px dashed #e6dccb; padding-top: .6rem; }
.narr-aspecto-rejilla { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.narr-aspecto-campos { display: grid; gap: .6rem; }
.narr-vista { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #111; }
.narr-vista-caja { position: absolute; left: 8%; right: 8%; bottom: 8%; padding: .6rem .8rem; background: rgba(16, 20, 30, .9); color: #f3efe6; display: grid; gap: .3rem; border: 1px solid rgba(255,255,255,.15); }
.narr-vista-caja b { font-size: 1.15rem; line-height: 1.1; }
.narr-vista-caja span { font-size: .78rem; opacity: .85; }
.narr-vista-caja i { font-style: normal; justify-self: start; background: #e0a23a; color: #111; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; }
.narr-paletas { display: flex; flex-wrap: wrap; gap: .35rem; }
.narr-paleta { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #d8cdb8; cursor: pointer; background: #fff; font-size: .8rem; }
.narr-paleta[aria-pressed="true"] { box-shadow: 0 0 0 3px #c98f22; }
.narr-colores { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; align-items: center; }
.narr-lugares { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .4rem; }
.narr-lugar { display: grid; gap: .2rem; padding: .25rem; border: 2px solid #e6dccb; border-radius: 8px; background: #fff; cursor: pointer; font-size: .75rem; text-align: center; opacity: .6; }
.narr-lugar[aria-pressed="true"] { border-color: #c98f22; opacity: 1; font-weight: 600; }
.narr-lugar-dibujo { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; }
@media (max-width: 720px) { .narr-aspecto-rejilla { grid-template-columns: 1fr; } }

/* v0.46: pestañas del panel de administración */
.admin-pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 1px solid var(--borde, rgba(127,127,127,.25)); }
.admin-pestanas button { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; font: inherit; font-weight: 600; color: inherit; opacity: .7; cursor: pointer; margin-bottom: -1px; }
.admin-pestanas button:hover { opacity: 1; }
.admin-pestanas button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--acento, #e0a23a); }
.admin-pestanas button:focus-visible { outline: 2px solid var(--acento, #e0a23a); outline-offset: 2px; border-radius: 6px; }

/* v0.47: galería libre */
.op-galeria .op-dibujo { aspect-ratio: 1; display: block; background: color-mix(in srgb, var(--acento) 10%, transparent); border-radius: 10px; overflow: hidden; }
.op-galeria .op-dibujo img { width: 100%; height: 100%; display: block; }
.op-galeria.activo { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 12px; }
.op-galeria.subiendo { opacity: .55; pointer-events: none; }
.creditos-galeria { font-size: .8rem; margin-top: .6rem; }

/* v0.54: vuelta al aspecto de la v0.47; variables que usan los bloques nuevos */
:root { --acento-suave: color-mix(in srgb, var(--acento) 14%, transparent); }
/* v0.49: crear en un paso desde el cuadro del inicio */
.compositor-pie { flex-wrap: wrap; }
.compositor-opcion { width: auto; max-width: 13rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 999px; padding: .38rem 1.8rem .38rem .8rem; font-size: .86rem; box-shadow: none; text-overflow: ellipsis; }
.compositor-opcion:hover { border-color: var(--tinta-2); }
.compositor-revisar { display: inline-flex; align-items: center; gap: .45rem; margin: .7rem auto 0; font-size: .86rem; color: var(--tinta-2); cursor: pointer; font-weight: 400; }
.compositor-revisar input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--acento); }
.en-un-paso h2 { margin-bottom: .2rem; }
@media (max-width: 640px) {
  .compositor-opcion { order: 1; max-width: none; flex: 1 1 40%; min-width: 0; font-size: .82rem; }
  .compositor-boton { order: 2; }
  .compositor-info { order: 3; }
  .compositor-enviar { order: 4; }
}

/* v0.50: vista previa al lado del editor */
.principal:has(.editor-visual.con-previa) { max-width: 1440px; }
.previa-barra { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.previa-barra .capitulos-movil { flex: 1; margin: 0; }
.previa-interruptor { margin-left: auto; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 999px; padding: .38rem .9rem; font-size: .86rem; white-space: nowrap; }
.previa-interruptor:hover { border-color: var(--tinta-2); }
.previa-interruptor[aria-pressed="true"] { background: var(--acento-suave); border-color: transparent; color: var(--acento-fuerte); }
.editor-previa { position: sticky; top: 16px; display: grid; grid-template-rows: auto 1fr auto; gap: .5rem; height: calc(100vh - 110px); min-height: 480px; }
.editor-previa[hidden] { display: none; }
.previa-cabecera { display: flex; align-items: center; gap: .2rem; }
.previa-cabecera strong { flex: 1; font-size: .92rem; }
.previa-marco { width: 100%; height: 100%; border: 1px solid var(--borde); border-radius: 14px; background: #0e131d; }
.previa-nota { margin: 0; font-size: .78rem; }
.editor-visual.con-previa { grid-template-columns: 200px minmax(0, 1fr) minmax(340px, 400px); }
@media (max-width: 1360px) {
  .editor-visual.con-previa { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .con-previa .editor-lateral { display: none; }
  .con-previa .capitulos-movil { display: block; }
}
@media (max-width: 860px) {
  .previa-interruptor, .editor-previa { display: none; }
}

/* v0.51: historial del curso */
.boton-historial { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); border-radius: 999px; padding: .42rem .95rem; font-size: .88rem; }
.boton-historial:hover { border-color: var(--tinta-2); }
dialog.historial { width: min(560px, calc(100vw - 32px)); max-height: min(80vh, 720px); border: 1px solid var(--borde); border-radius: 18px; padding: 1.3rem 1.4rem; background: var(--superficie); color: var(--tinta); box-shadow: 0 24px 60px rgba(15, 20, 30, .22); }
dialog.historial::backdrop { background: rgba(15, 20, 30, .35); }
.historial-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.historial-cab h2 { margin: 0; font-size: 1.2rem; }
dialog.historial > .sutil { font-size: .86rem; margin: .4rem 0 1rem; }
.historial-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.historial-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .85rem; border: 1px solid var(--borde); border-radius: 12px; }
.historial-item > div { display: grid; gap: .1rem; min-width: 0; }
.historial-item strong { font-size: .92rem; }
.historial-item span { font-size: .86rem; }
.historial-item .sutil { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historial-item .boton-sec { flex: none; font-size: .84rem; padding: .4rem .8rem; }

/* v0.52: otra edad */
.cabecera-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.otra-edad { grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.otra-edad .eleccion.actual { opacity: .55; }
.dialogo-otra-edad .acciones { display: flex; justify-content: flex-end; margin-top: 1rem; }
/* v1.80: unir cursos */
.dialogo-unir { width: min(56rem, calc(100vw - 2rem)); }
.dialogo-unir .unir-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: .75rem; }
.dialogo-unir h3 { font-size: .95rem; margin: 0 0 .5rem; }
.dialogo-unir .campo-busqueda { width: 100%; margin-bottom: .5rem; }
.unir-lista { max-height: 22rem; overflow: auto; display: grid; gap: .35rem; padding-right: .25rem; }
.unir-curso { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: .6rem; cursor: pointer; }
.unir-curso.elegido { border-color: var(--acento, #e0a23a); background: color-mix(in srgb, var(--acento, #e0a23a) 8%, transparent); }
.unir-curso input { flex: none; width: auto; margin-top: .2rem; }
.unir-orden .cap-flechas { display: flex; gap: .25rem; flex: none; }
.unir-curso span { display: grid; gap: .1rem; }
.unir-orden { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; min-height: 2.5rem; }
.unir-orden li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: .6rem; }
.unir-num { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--acento); color: var(--sobre-acento); }
.unir-nombre { flex: 1; display: grid; min-width: 0; }
.unir-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogo-unir .acciones { display: flex; justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 720px) { .dialogo-unir .unir-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .otra-edad { grid-template-columns: 1fr; } }

/* v0.53: resultados más claros */
.retos-dificiles li { grid-template-columns: minmax(0, 1fr) 120px 3.2rem auto; }
.conclusiones { margin: 1.2rem 0 .4rem; padding: .9rem 1.1rem; background: var(--acento-suave); border-radius: 12px; }
.conclusiones h3 { margin: 0 0 .4rem; font-size: 1rem; }
.conclusiones ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.embudo { margin: 1.4rem 0 1rem; }
.embudo h3 { margin-bottom: .6rem; }
.embudo ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.embudo li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 40%) 5.5rem; gap: .8rem; align-items: center; padding: .45rem .7rem; border-radius: var(--radio); }
.embudo li.caida { background: color-mix(in srgb, #e5484d 9%, transparent); }
.embudo li.caida .reto-barra i { background: #e5484d; }
.embudo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.tabla-alumnos { margin: 1rem 0; }
.tabla-alumnos > summary { cursor: pointer; font-weight: 600; margin-bottom: .6rem; }
.bloque-ed.resaltado { outline: 3px solid var(--acento); outline-offset: 4px; transition: outline-color .4s; }
@media (max-width: 560px) {
  .retos-dificiles li { grid-template-columns: minmax(0, 1fr) 3.2rem; }
  .retos-dificiles .reto-barra { display: none; }
  .embudo li { grid-template-columns: minmax(0, 1fr) 5.5rem; }
  .embudo .reto-barra { display: none; }
}

/* v0.54: todo ordenado en pestañas */
.pestanas { display: flex; gap: .2rem; border-bottom: 1px solid var(--borde); margin: 0 0 1.2rem; overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: .7rem 1rem; font: inherit; font-weight: 600; color: var(--tinta-2); white-space: nowrap; cursor: pointer; border-radius: 0; }
.pestana:hover { color: var(--tinta); }
.pestana[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--acento); }
.pestana-cuenta { font-size: .75rem; font-weight: 700; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 0 .5rem; min-width: 1.6rem; text-align: center; }
.pestana-panel[hidden] { display: none; }
.grupo-pestana { display: grid; gap: 1.2rem; }
details.en-pestana > summary { pointer-events: none; list-style: none; cursor: default; }
details.en-pestana > summary::-webkit-details-marker { display: none; }
details.en-pestana > summary::after { display: none !important; }
.bloque-un-paso { margin: 1rem 0 .4rem; padding: 1rem 1.1rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); display: grid; gap: .8rem; }
.bloque-un-paso .interruptor { align-items: flex-start; }
.opciones-paso { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.opciones-paso[hidden] { display: none; }
.opciones-paso .campo { margin: 0; }
@media (max-width: 560px) { .opciones-paso { grid-template-columns: 1fr; } .pestana { padding: .65rem .75rem; } }
.zona-peligro { border-color: color-mix(in srgb, var(--error) 45%, var(--borde)); }
.zona-peligro h2 { color: var(--error); }
.boton-peligro { background: transparent; color: var(--error); border: 1px solid var(--error); border-radius: var(--radio); padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; }
.boton-peligro:hover { background: var(--error); color: #fff; }

/* v0.56: vuelta al estilo original. Se conservan, con sus colores, el resumen de cada curso
   (estado y cifras agrupadas) y el arreglo para que nada se salga en el móvil. */
.principal { grid-template-columns: minmax(0, 1fr); }
.principal > * { min-width: 0; }
.pasos { overflow-x: auto; }
.cabecera-vista > * { min-width: 0; }
.resumen-curso { display: grid; gap: .75rem; margin: .25rem 0 1.25rem; }
.resumen-estado { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--tinta-2); }
.estado-curso { display: inline-block; padding: .2rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--borde); }
.estado-curso.publicado { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--borde)); background: color-mix(in srgb, var(--ok) 12%, var(--superficie)); }
.datos-curso { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.dato-curso { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .75rem .9rem; }
.dato-etiqueta { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.dato-curso b { display: block; font-size: 1.4rem; font-family: var(--f-ui); margin-top: .2rem; }
.dato-nota { display: block; font-size: .74rem;  color: var(--tinta-2); }
@media (max-width: 900px) { .datos-curso { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .datos-curso { grid-template-columns: 1fr 1fr; } .dato-curso b, .dato-valor { font-size: 1.2rem; } }

/* v0.58: imagen de apoyo en diálogos y narraciones */
.con-apoyo { display: grid; gap: .4rem; }
.apoyo-ed { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; opacity: .55; transition: opacity .2s; }
.bloque-ed:hover .apoyo-ed, .bloque-ed:focus-within .apoyo-ed, .apoyo-ed.con-imagen { opacity: 1; }
.apoyo-subir { font-size: .82rem; padding: .3rem .7rem; cursor: pointer; }
.apoyo-ed .pz-miniatura { max-height: 70px; border-radius: 6px; }

/* v0.59: buscador de cursos */
.buscador-cursos { display: grid; gap: .9rem; }
.barra-busqueda { display: flex; flex-wrap: wrap; gap: .6rem .8rem; align-items: center; }
.campo-busqueda { flex: 1 1 260px; min-width: 0; padding: .65rem .9rem .65rem 2.3rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") no-repeat .8rem center; color: var(--tinta); font: inherit; }
.campo-busqueda:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.chips-busqueda { display: flex; gap: .4rem; flex-wrap: wrap; }
.orden-busqueda { padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; }
.cuenta-busqueda:empty { display: none; }
.cuenta-busqueda { margin: 0; }

/* v1.24: carpetas de Mis cursos */
.carpetas-cursos { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--borde); }
.chip-carpeta { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; }
.chip-carpeta > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.chip-carpeta svg { flex: none; }
.chip-cuenta { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }
.chip-carpeta.soltar { outline: 2px dashed var(--acento); outline-offset: 2px; background: var(--superficie-2); }
.chip-carpeta[aria-pressed="true"].soltar { background: var(--acento-fuerte); }
.nueva-carpeta { font-size: .88rem; margin-left: .2rem; }
.acciones-carpeta { display: inline-flex; gap: .9rem; margin-left: auto; font-size: .88rem; }
.form-carpeta { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.campo-carpeta { padding: .4rem .7rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); font: inherit; font-size: .9rem; width: 14rem; max-width: 100%; }
.campo-carpeta:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.tarjeta-curso.arrastrando { opacity: .5; }
.carpeta-curso { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--tinta-2); }
.carpeta-curso svg { width: 14px; height: 14px; flex: none; }
.menu-carpeta { position: fixed; z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; padding: .35rem; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 12px 32px rgba(0,0,0,.18); display: grid; gap: 1px; }
.menu-carpeta-titulo { margin: .2rem .6rem .3rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.menu-carpeta button { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: none; color: inherit; font: inherit; font-size: .9rem; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; }
.menu-carpeta button:hover, .menu-carpeta button:focus-visible { background: var(--superficie-2); outline: none; }
.menu-carpeta button[aria-checked="true"] { font-weight: 600; color: var(--acento); }
.menu-carpeta button[aria-checked="true"]::after { content: ""; margin-left: auto; width: .45rem; height: .8rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.menu-carpeta-hueco { width: 16px; flex: none; }
.menu-carpeta .menu-carpeta-nueva { color: var(--acento); border-top: 1px solid var(--borde); border-radius: 0 0 6px 6px; margin-top: .2rem; }
.menu-carpeta .form-carpeta { padding: .4rem; border-top: 1px solid var(--borde); margin-top: .2rem; }
.menu-carpeta .form-carpeta button { width: auto; }
.menu-carpeta .form-carpeta .boton { color: var(--sobre-acento); background: var(--acento-fuerte); }

/* v0.60: descargas del curso */
.filas-descarga { display: grid; gap: .6rem; margin-top: .8rem; }
.fila-descarga { display: flex; justify-content: space-between; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.fila-descarga p { margin: .2rem 0 0; }
.fila-descarga .acciones { display: flex; gap: .5rem; }

/* v0.64: paleta por grupos y editor de bloques interactivos */
.paleta-grupo { grid-column: 1 / -1; font: 600 .7rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #e0a23a; padding: .5rem .1rem .1rem; }
.paleta-grupo:first-child { padding-top: .1rem; }
.ix-ed { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 8px; background: #141a26; color: #ece6d8; border-top: 4px solid #e0a23a; }
.ix-ed .vivo::placeholder { color: #8f96a3; }
.ix-ed .vivo:focus { background: rgba(255,255,255,.06); }
.secciones-ed { display: grid; gap: .55rem; }
.ix-ed-carrusel .secciones-ed, .ix-ed-pestanas .secciones-ed { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.seccion-ed { display: grid; gap: .2rem; align-content: start; padding: .55rem .7rem .65rem; border: 1px solid rgba(236,230,216,.18); border-radius: 8px; background: rgba(255,255,255,.04); }
.ix-ed-pasos .seccion-ed { border-left: 4px solid #e0a23a; }
.ix-ed-cronologia .seccion-ed { border-left: 4px solid #5fa8d3; }
.seccion-ed-cab { display: flex; align-items: center; gap: .25rem; }
.seccion-ed-cab .hueco { flex: 1; }
.seccion-num { font: 600 .72rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #e0a23a; }
.seccion-ed-cab .icono { width: 1.6rem; height: 1.6rem; font-size: .85rem; color: #ece6d8; border-color: rgba(236,230,216,.25); background: transparent; }
.lienzo .ix-ed .seccion-ed .titulo-ed { font-size: 1.02rem; }
.lienzo .ix-ed .fecha-ed { font-family: var(--f-ui); font-weight: 700; color: #f0c674; }
.sec-miniatura { max-width: 100%; max-height: 120px; border-radius: 6px; justify-self: start; }
.sec-medios { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.sec-subir { font-size: .8rem; padding: .25rem .6rem; cursor: pointer; color: #ece6d8; border-color: rgba(236,230,216,.3); background: transparent; }
.ix-ed .enlace { color: #f0c674; font-size: .8rem; }
.seccion-mas { min-height: 3rem; color: #f0c674; border-color: rgba(236,230,216,.3); }
/* La paleta de bloques no debe heredar el estilo de las paletas de colores (.paleta de Marca). */
.insertar > .paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); align-items: stretch; gap: .4rem; padding: .6rem; border: 0; border-radius: 10px; background: #1f1b18; font: inherit; font-family: var(--f-ui); cursor: default; }
.insertar > .paleta[hidden] { display: none; }
/* v0.65: editores de caja, reflexión, consecuencias, prioridades y candado */
.prioridades-ed li { align-items: flex-start; }
.prior-textos { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.prioridades-ed li.sin-num { list-style: none; }
.modo-ed { font: inherit; font-family: var(--f-ui); font-size: .85rem; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--linea-ed); background: var(--papel-ed); color: var(--letra-ed); max-width: 100%; }
.lienzo .clave-ed { font-family: var(--f-ui); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lienzo .ix-ed .boton-ed { font-family: var(--f-ui); font-size: .88rem; color: #f0c674; }
/* v0.66: editores de puntos, lupa, antes y después, caza de errores y lienzo */
.imgbloque-ed, .errores-ed, .lienzo-ed { display: grid; gap: .5rem; }
.sec-miniatura.grande { max-height: 220px; }
.comparar-ed { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.comparar-ed > div { display: grid; gap: .35rem; align-content: start; }
.zona-pin { width: 22px; min-width: 22px; border-color: #e0a23a; background: rgba(224,162,58,.35); }
.zona-pin b { background: #e0a23a; color: #1d1a16; }
.ix-ed .sutil { color: #b9b0a2; margin: 0; }
.ix-ed .buscar-ed img { border-color: rgba(236,230,216,.4); }
.lienzo .texto-err-ed { min-height: 5rem; }
.errores-ed .sutil.error { color: #c0453a; font-weight: 600; }
.piezas-ed { display: grid; gap: .35rem; }
.pieza-ed { display: flex; gap: .4rem; align-items: center; }
.pieza-ed .vivo { flex: 1; min-width: 0; border: 1px solid var(--linea-ed); background: var(--papel-ed); margin: 0; }
/* v0.67: editores de gráfico y escenario ramificado */
.datos-ed, .rama-ed { display: grid; gap: .6rem; }
.dato-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem); gap: .5rem; align-items: center; }
.valor-ed { text-align: right; font-variant-numeric: tabular-nums; }
.rama-nodo { border-left: 4px solid var(--acento, #e0a23a); }
.rama-nodo.final-bien { border-left-color: #2f8a57; }
.rama-nodo.final-mal { border-left-color: #c0453a; }
.rama-nodo .seccion-ed-cab .modo-ed { width: auto; max-width: 15rem; }
.rama-ops { display: grid; gap: .4rem; padding-left: .8rem; }
.rama-op { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem) auto; gap: .45rem; align-items: center; }
.destino-ed { font: inherit; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--linea, #ccc); background: transparent; color: inherit; }
.rama-aviso.error { color: #c0453a; font-weight: 600; }
@media (max-width: 560px) { .dato-fila, .rama-op { grid-template-columns: 1fr; } }
/* v0.69: editor de estimación */
.estima-ed { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.campo-num { display: grid; gap: .2rem; font-size: .8rem; color: var(--letra-2, #666); }
.campo-num input { font-size: 1rem; color: var(--letra, inherit); border: 1px solid var(--linea, #ccc); border-radius: 6px; padding: .35rem .5rem; }
/* v0.70: editor de palabras */
.palabra-fila { grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto; }
.palabra-ed { text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 560px) { .palabra-fila { grid-template-columns: 1fr auto; } }
/* v0.71: asistente de creación y progreso de la creación en el servidor */
.pasos-asistente { margin-bottom: 1.2rem; }
.asistente-cuerpo { display: grid; gap: 1.4rem; }
.asistente-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.paso-material .cuenta.falta { color: var(--error); }
.opciones-extra { display: grid; gap: .3rem; }
.opcion-check { display: grid; gap: .6rem; padding: .35rem 0; border-top: 1px solid var(--borde); }
.opcion-check:first-of-type { border-top: 0; }
.opcion-check .diploma-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 2.4rem; }
.resumen-elecciones { display: grid; }
.resumen-fila { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline; padding: .6rem 0; border-top: 1px solid var(--borde); }
.resumen-fila:first-child { border-top: 0; }
.resumen-fila strong { overflow-wrap: anywhere; }
.tabla-precio { width: 100%; max-width: 30rem; border-collapse: collapse; margin: .2rem 0 .8rem; }
.tabla-precio td { padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.tabla-precio td + td { text-align: right; white-space: nowrap; padding-left: 1rem; }
.tabla-precio tr.total td { font-weight: 700; font-size: 1.1rem; border-bottom: 0; padding-top: .6rem; }
.resumen-precio .falta { color: var(--error); }
.panel-generar { display: grid; gap: 1rem; }
.panel-generar .acciones { justify-content: space-between; }
.boton-generar { min-width: 14rem; }
.barra-creando { display: block; height: 8px; border-radius: 8px; background: var(--superficie-2); overflow: hidden; margin: .4rem 0; }
.barra-creando > span { display: block; height: 100%; background: var(--acento-fuerte); border-radius: 8px; transition: width .6s ease; }
.panel-creando { display: grid; gap: 1rem; }
.panel-creando .piezas li[data-estado="pendiente"] { opacity: .65; }
.tarjeta-curso.creandose .eyebrow { color: var(--acento-fuerte); }
@media (max-width: 640px) {
  .resumen-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .resumen-fila > .sutil { grid-column: 1 / -1; margin-bottom: -.5rem; }
  .opcion-check .diploma-campos { grid-template-columns: 1fr; margin-left: 0; }
  .asistente-pie .boton.grande { flex: 1; }
}
.asistente-cuerpo .paso-historia { display: grid; gap: 1.4rem; }
/* v0.72: editor por pestañas, mover y duplicar */
.editor-pestanas .pestanas { flex-wrap: nowrap; }
.volver-editor { margin: 0 0 1rem; }
.cap-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; }
.cap-acciones .sutil { margin-right: .3rem; }
.mini-boton { padding: .3rem .65rem; font-size: .85rem; }
.panel-mover { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem; margin: 0 0 .6rem; background: var(--superficie-2, #f3efe6); border-radius: 8px; font-family: var(--f-ui, inherit); font-size: .9rem; }
.panel-mover select { max-width: 100%; min-width: 0; flex: 1 1 12rem; }
/* v0.73: Icono de ayuda en la barra de la aplicación */
.boton-ayuda { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: #e9e3d6 !important; font-weight: 600; font-size: .9rem; text-decoration: none; line-height: 1; }
.boton-ayuda:hover, .boton-ayuda:focus-visible { border-color: #e0a23a; color: #e0a23a !important; }
/* v0.73: ordenar capítulos desde la lista */
.cap-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: .2rem; }
.cap-item.arrastrando { opacity: .5; }
.cap-item.soltar-aqui > button { border-color: var(--acento-fuerte); box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento-fuerte) 35%, transparent); }
.cap-flechas { display: flex; flex-direction: column; justify-content: center; gap: .2rem; }
.cap-flechas .icono { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
.previa-barra .cap-flechas.capitulos-movil { flex-direction: row; }
.previa-barra .cap-flechas.capitulos-movil { flex: none; width: auto; white-space: nowrap; }
.previa-barra .cap-flechas.capitulos-movil { display: none; }
@media (max-width: 860px) { .previa-barra .cap-flechas.capitulos-movil { display: flex; } }
@media (max-width: 1360px) { .con-previa .previa-barra .cap-flechas.capitulos-movil { display: flex; } }

/* v0.75: icono dibujado de cada narrativa */
.icono-narrativa, .narr-icono { display: inline-flex; flex: none; width: 1.6rem; height: 1.6rem; color: var(--acento, currentColor); }
.icono-narrativa svg, .narr-icono svg { width: 100%; height: 100%; }
.eleccion-titulo { display: flex; align-items: center; gap: .5rem; }
.ejemplo-chip { display: inline-flex; align-items: center; gap: .3rem; }
.ejemplo-chip .icono-narrativa { width: 1rem; height: 1rem; color: #222; }
.resumen-estado .icono-narrativa { width: 1.25rem; height: 1.25rem; color: var(--tinta-2); margin-right: -.3rem; }
.narr-cab .narr-icono { width: 1.5rem; height: 1.5rem; }

/* v0.76: logotipo delante del nombre */
.marca { display: inline-flex; align-items: center; gap: .55rem; }
.marca .logo { width: 1.75rem; height: 1.75rem; flex: none; }
.marca.grande .logo { width: 2.75rem; height: 2.75rem; }
.marca-texto { display: grid; line-height: 1.05; }
.marca-de { font: 500 .8rem/1.3 var(--f-ui); letter-spacing: 0; color: var(--tinta-2); margin-top: .2rem; }
.barra .marca-de, .portada-barra .marca-de { font-size: .62rem; line-height: 1.2; margin-top: .1rem; color: #a3a9b6; }
.marca.grande .logo { width: 3.25rem; height: 3.25rem; }

/* v0.77: personajes con IA */
.personajes-ia textarea { width: 100%; }
.personajes-ia .progreso-ia { margin-top: .6rem; }
.personajes-ia .progreso-ia .hueco-gesto { cursor: default; }
.personajes-ia .progreso-ia .hueco-gesto.subiendo { opacity: 1; border-color: var(--acento); animation: latido-ia 1.2s ease-in-out infinite; }
@keyframes latido-ia { 50% { background: var(--superficie); } }
.estado-ia .error { color: #b3261e; }
.biblioteca-ia .item-ia { display: grid; justify-items: center; gap: .1rem; }
.biblioteca-ia .op-autor { font-size: .72rem; color: var(--texto-suave, #6b7280); line-height: 1.2; } /* v1.38 */
.biblioteca-ia .op-dibujo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.borrar-ia { font-size: .75rem; }
.conector { border: 1px solid var(--borde); border-radius: 10px; padding: 1rem 1.1rem; margin: 0 0 1rem; background: var(--superficie); }
.conector-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.conector-cab h3 { margin: 0; }
.estado-conector { font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 99px; background: #e3f4ea; color: #1d6b3f; }
.fila-conector { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.salida-conector { display: flex; align-items: center; gap: .6rem; }
.salida-conector .error { color: #b3261e; }
.ok-conector { color: #1d6b3f; font-weight: 600; }
.prueba-conector { width: 64px; height: 64px; border-radius: 6px; border: 1px solid var(--borde); }
.ayuda-conector { margin-top: .8rem; }
.ayuda-conector summary { cursor: pointer; font-weight: 600; }
.personajes-ia .progreso-ia .hueco-gesto img { max-height: calc(100% - 1.4rem); }
.biblioteca-ia > p { grid-column: 1 / -1; }

/* v0.78: asistente */
.asistente-pie.arriba { margin: .2rem 0 1rem; }
.asistente-pie.arriba:empty { display: none; }
.campo-titulo { display: grid; gap: .3rem; margin: 0 0 1.4rem; }
.campo-titulo .etiqueta-titulo { font-weight: 600; }
.campo-titulo .titulo-curso { font-family: var(--f-marca); font-size: 1.35rem; padding: .55rem .8rem; }
.nota-titulo:empty { display: none; }
.ejemplo-estilo { display: block; width: 100%; aspect-ratio: 160 / 190; max-height: 150px; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #26324a, #141a28); }
.ejemplo-estilo svg, .ejemplo-estilo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
.ejemplo-estilo.cargando { background: linear-gradient(160deg, #26324a, #141a28); }
.otros-repartos { margin-top: 1rem; }
.otros-repartos summary { cursor: pointer; font-weight: 600; color: var(--acento); }
.otros-repartos input[type=search] { margin: .7rem 0; width: 100%; }
.curso-mov { font-weight: 600; }
.ejemplo-estilo { aspect-ratio: 180 / 250; max-height: 190px; }
.ejemplo-estilo .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.ejemplo-estilo .parpado { transform-box: fill-box; transform: scaleY(0); }
.ejemplo-estilo img { object-fit: cover; }

/* v0.80: editor en pestañas con subpestañas */
.subpestanas { display: flex; flex-wrap: wrap; gap: .15rem; background: none; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; padding: 0 .2rem; margin: -.4rem 0 1.1rem; }
.subpestanas .pestana { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0 0 -1px; padding: .5rem .8rem; font-size: .92rem; font-weight: 600; color: var(--tinta-2); box-shadow: none; }
.subpestanas .pestana:hover { color: var(--tinta); }
.subpestanas .pestana[aria-selected="true"] { background: none; box-shadow: none; color: var(--tinta); border-bottom-color: var(--acento); }
.subpestanas .pestana-cuenta { font-size: .7rem; }
.principal:has(.subpestanas-caja .editor-visual.con-previa:not([hidden])) { max-width: 1480px; }
@media (min-width: 1361px) { .editor-visual.con-previa { grid-template-columns: 200px minmax(0, 1fr) minmax(360px, 460px); } }
.aspecto-con-previa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 1rem; align-items: start; }
.aspecto-previa { position: sticky; top: 16px; }
.aspecto-previa .vista-previa { height: min(70vh, 640px); }
@media (max-width: 1100px) { .aspecto-con-previa { grid-template-columns: minmax(0, 1fr); } .aspecto-previa { position: static; } }
@media (max-width: 600px) { .subpestanas .pestana { padding: .45rem .55rem; font-size: .86rem; } }
/* v0.80: retrato con imagen en el editor (recorta la cara como el SVG: viewBox 40 50 140 140 de 220×320) */
.avatar.con-imagen { position: relative; }
.avatar.con-imagen img { position: absolute; left: -28.57%; top: -35.71%; width: 157.14%; height: 228.57%; max-width: none; object-fit: contain; object-position: center bottom; }

/* v0.85: Mis cursos con portada (colores, icono de la narrativa, guía) y vista en lista */
.tarjeta-curso { overflow: hidden; }
.tarjeta-curso .tarjeta-enlace { padding: 0; gap: 0; }
.tarjeta-texto { display: grid; gap: .35rem; padding: .9rem 1.1rem .6rem; align-content: start; min-width: 0; }
.portada-curso { position: relative; height: 104px; overflow: hidden; color: var(--p-acento);
  background: radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--p-acento) 28%, var(--p-fondo)) 0%, var(--p-fondo) 70%); border-bottom: 3px solid var(--p-acento); }
.portada-imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.portada-curso .icono-narrativa { position: absolute; left: 14px; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--p-fondo) 70%, transparent); border: 1.5px solid var(--p-acento); }
.portada-curso .icono-narrativa svg { width: 26px; height: 26px; }
.portada-guia { position: absolute; right: 10px; bottom: -6px; width: 84px; height: 104px; }
.portada-guia svg { width: 100%; height: 100%; display: block; }
.portada-guia .gestos > g:where(:not(.g-neutro)) { display: none; } /* v0.88: especificidad baja para que gane el gesto elegido */
.portada-guia .parpado { transform: scaleY(0); }
.portada-guia img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.meta-curso { font-size: .85rem; color: var(--tinta-2); }
.vistas-cursos { display: inline-flex; gap: 2px; border: 1px solid var(--borde); border-radius: 10px; padding: 2px; background: var(--superficie); margin-left: auto; }
.vista-boton { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--tinta-2); cursor: pointer; }
.vista-boton[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); }
/* Lista */
.rejilla-cursos.en-lista { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.en-lista .tarjeta-curso { flex-direction: row; align-items: center; }
.en-lista .tarjeta-curso:hover { transform: none; }
.en-lista .tarjeta-enlace { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.en-lista .portada-curso { height: 64px; border-bottom: 0; border-right: 3px solid var(--p-acento); }
.en-lista .portada-curso .icono-narrativa { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; }
.en-lista .portada-curso .icono-narrativa svg { width: 22px; height: 22px; }
.en-lista .portada-guia { display: none; }
.en-lista .tarjeta-texto { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ey fe" "ti ti" "me ca"; padding: .55rem 1rem; gap: .1rem .8rem; }
.en-lista .tarjeta-texto .eyebrow { grid-area: ey; }
.en-lista .tarjeta-texto h3 { grid-area: ti; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-lista .tarjeta-texto .meta-curso { grid-area: me; }
.en-lista .tarjeta-texto .carpeta-curso { grid-area: ca; justify-self: end; }
.en-lista .tarjeta-texto .fecha-curso { grid-area: fe; font-size: .8rem; text-align: right; }
.en-lista .tarjeta-texto .barra-creando { grid-column: 1 / -1; }
.en-lista .tarjeta-pie { padding: 0 1rem; flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 700px) {
  .en-lista .tarjeta-curso { flex-direction: column; align-items: stretch; }
  .en-lista .tarjeta-enlace { grid-template-columns: 64px minmax(0, 1fr); }
  .en-lista .tarjeta-pie { padding: 0 1rem .5rem; justify-content: flex-end; }
  .en-lista .tarjeta-texto .fecha-curso { display: none; }
}

/* v0.95: portada de la tarjeta con el estilo del skin */
.portada-skin { background: #f3f5f8; color: #16202c; border-bottom: 1px solid rgba(0,0,0,.1); isolation: isolate; }
.portada-skin .portada-guia { z-index: 2; }
.ps-d { position: absolute; pointer-events: none; }
.ps-texto { position: absolute; left: 16px; right: 102px; top: 10px; bottom: 10px; z-index: 1; display: grid; align-content: center; justify-items: start; gap: 4px; }
.ps-marca { max-width: 100%; font: 700 8px/1.3 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-titulo { max-width: 100%; font: 700 19px/1.08 system-ui, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.ps-letra { display: none; }
/* Serie: plataforma de series, oscuro con la marca roja */
.ps-serie { background: radial-gradient(90% 150% at 88% 30%, #2b3150 0%, #11131b 55%, #07080b 100%); color: #fff; }
.ps-serie .ps-marca { display: flex; align-items: center; gap: 6px; font-size: 7.5px; letter-spacing: .24em; }
.ps-serie .ps-marca::before { content: ""; flex: none; width: 5px; height: 11px; background: var(--marca, #e50914); }
.ps-serie .ps-titulo { font: 400 26px/.92 "Bebas Neue", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.ps-serie::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38%; height: 3px; background: var(--marca, #e50914); z-index: 3; }
/* Juego de mesa: caja roja con borde amarillo sobre la mesa y un dado */
.ps-juego { background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 26px), linear-gradient(#8d5c34, #6a4225); color: #fff; }
.ps-juego .ps-d-caja { left: 8px; right: 8px; top: 9px; bottom: 9px; border-radius: 10px; border: 3px solid #f4c430; transform: rotate(-1deg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--marca, #c8352a) 80%, #fff), var(--marca, #c8352a) 60%); box-shadow: 0 3px 0 #4a2a12, 0 7px 14px rgba(0,0,0,.35); }
.ps-juego .ps-d-dado { right: 90px; bottom: 5px; width: 20px; height: 20px; border-radius: 4px; transform: rotate(14deg); z-index: 3; box-shadow: 0 2px 3px rgba(0,0,0,.4);
  background: radial-gradient(circle at 27% 27%, #c8352a 2px, transparent 2.6px), radial-gradient(circle, #c8352a 2px, transparent 2.6px), radial-gradient(circle at 73% 73%, #c8352a 2px, transparent 2.6px), #fff; }
.ps-juego .ps-texto { left: 24px; top: 16px; bottom: 16px; }
.ps-juego .ps-marca { background: #f4c430; color: #5a2608; padding: 1px 6px; border-radius: 3px; font: 800 8px/1.4 Nunito, system-ui, sans-serif; letter-spacing: .08em; }
.ps-juego .ps-titulo { font: 400 21px/1.02 "Lilita One", Nunito, system-ui, sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
/* Mapa de aventura: pergamino con ruta discontinua y una X */
.ps-mapa { background: radial-gradient(120% 140% at 50% 40%, #f3e8cb 0%, #e4d3a7 62%, #c6aa72 100%); color: #3e2a17; }
.ps-mapa .ps-d-marco { inset: 5px; border: 1px solid rgba(110,78,40,.45); outline: 1px solid rgba(110,78,40,.2); outline-offset: 2px; }
.ps-mapa .ps-d-ruta { left: 24px; right: 112px; bottom: 9px; height: 12px; border-bottom: 2px dashed color-mix(in srgb, var(--marca, #8e2a1b) 75%, transparent); border-radius: 0 0 60% 40%; }
.ps-mapa .ps-d-x { right: 98px; bottom: 7px; color: var(--marca, #8e2a1b); font: 700 15px/1 Georgia, serif; }
.ps-mapa .ps-d-x::before { content: "✕"; }
.ps-mapa .ps-texto { bottom: 22px; }
.ps-mapa .ps-marca { font: italic 400 10px/1.3 Georgia, serif; letter-spacing: 0; text-transform: none; color: #6b5233; }
.ps-mapa .ps-titulo { font: 400 20px/1.05 "IM Fell English SC", Georgia, serif; color: var(--marca, #8e2a1b); }
/* Álbum de cromos: tapa morada con lomo, letras de cómic doradas y sello */
.ps-album { background: radial-gradient(110% 130% at 30% 15%, #7c4bc6, #4b2390 60%, #2e1462); color: #ffd23f; }
.ps-album .ps-d-lomo { left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, #22093f, #47208a); box-shadow: 1px 0 0 rgba(255,255,255,.18); }
.ps-album .ps-d-sello { right: 92px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f7c948 50%, #e09a10); box-shadow: 0 0 0 2px rgba(122,62,0,.55), 0 2px 4px rgba(0,0,0,.35); }
.ps-album .ps-texto { left: 24px; right: 100px; }
.ps-album .ps-marca { color: #fff; font: 800 8px/1.3 Nunito, system-ui, sans-serif; letter-spacing: .14em; }
.ps-album .ps-titulo { font: 400 17px/1.08 "Luckiest Guy", Nunito, system-ui, sans-serif; color: var(--marca, #ffd23f); letter-spacing: .02em;
  text-shadow: 0 2px 0 #6e3200, 1px 0 0 #6e3200, -1px 0 0 #6e3200, 0 -1px 0 #6e3200; }
/* Niveles de videojuego: cielo, nube, bloque «?» y suelo de ladrillos */
.ps-niveles { background: linear-gradient(#55a5f3, #a6d4ff 85%); color: #ffd84a; }
.ps-niveles .ps-d-suelo { left: 0; right: 0; bottom: 0; height: 14px; border-top: 3px solid #52b043; z-index: 1;
  background: linear-gradient(transparent 5px, #7a3410 5px 6px, transparent 6px), repeating-linear-gradient(90deg, #d0682c 0 15px, #7a3410 15px 16px); }
.ps-niveles .ps-d-nube { right: 128px; top: 9px; width: 28px; height: 10px; border-radius: 10px; background: #fff; }
.ps-niveles .ps-d-nube::before { content: ""; position: absolute; left: 7px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.ps-niveles .ps-d-bloque { right: 96px; top: 9px; width: 18px; height: 18px; border: 2px solid #8a4b00; border-radius: 3px; background: #f7bb22; color: #8a4b00; font: 400 9px/14px "Press Start 2P", monospace; text-align: center; }
.ps-niveles .ps-d-bloque::before { content: "?"; }
.ps-niveles .ps-texto { bottom: 22px; }
.ps-niveles .ps-marca { background: #233a7a; color: #fff; padding: 2px 6px; border-radius: 999px; font: 400 6px/1.4 "Press Start 2P", monospace; letter-spacing: .04em; }
.ps-niveles .ps-titulo { font: 700 20px/1.02 Fredoka, system-ui, sans-serif; text-shadow: 0 2px 0 #6b3a00, 1.5px 0 0 #6b3a00, -1.5px 0 0 #6b3a00, 0 -1.5px 0 #6b3a00; }
/* Revista: cubierta con la cabecera roja y la pegatina amarilla */
.ps-revista { background: linear-gradient(165deg, #2a2e3c, #12141b 70%); color: #fff; }
.ps-revista .ps-d-sello { right: 92px; top: 9px; width: 26px; height: 26px; border-radius: 50%; background: #ffd400; transform: rotate(-12deg); z-index: 3; }
.ps-revista .ps-d-sello::before { content: "¡Nuevo!"; position: absolute; inset: 0; display: grid; place-items: center; color: #141414; font: 700 6.5px/1 Inter, system-ui, sans-serif; }
.ps-revista .ps-texto { gap: 2px; right: 124px; }
.ps-revista .ps-marca { font: 400 25px/1 "Abril Fatface", Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--marca, #d7141f); }
.ps-revista .ps-titulo { font: 700 15px/1.12 "Playfair Display", Georgia, serif; }
/* Expediente: carpeta de cartulina sobre la mesa con el sello «Confidencial» */
.ps-expediente { background: linear-gradient(135deg, #4b3424, #2c1f15); color: #2b2118; }
.ps-expediente .ps-d-carpeta { left: 10px; right: 24px; top: 16px; bottom: -6px; border-radius: 0 6px 0 0; background: linear-gradient(#ecd59e, #e2c785); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.ps-expediente .ps-d-carpeta::before { content: ""; position: absolute; left: 0; top: -9px; width: 72px; height: 10px; border-radius: 5px 5px 0 0; background: #ecd59e; }
.ps-expediente .ps-texto { left: 22px; top: 22px; bottom: 6px; gap: 5px; }
.ps-expediente .ps-marca { order: 2; color: #b3261e; border: 1.5px solid currentColor; border-radius: 3px; padding: 0 5px; transform: rotate(-4deg); font: 400 10px/1.4 "Special Elite", "Courier New", monospace; letter-spacing: .12em; }
.ps-expediente .ps-titulo { font: 400 17px/1.1 "Special Elite", "Courier New", monospace; }
/* Catálogo de lujo: marfil, filete dorado y serifa fina */
.ps-lujo { background: #f8f4ec; color: var(--marca, #3a332b); }
.ps-lujo .ps-d-filete { inset: 7px; border: 1px solid #c9ab6e; }
.ps-lujo .ps-texto { left: 20px; }
.ps-lujo .ps-marca { color: #a8884e; font: 500 7.5px/1.3 Jost, system-ui, sans-serif; letter-spacing: .32em; }
.ps-lujo .ps-titulo { font: 400 23px/1 "Cormorant Garamond", Georgia, serif; }
/* Periódico antiguo: cabecera gótica entre reglas, gran titular y columnas */
.ps-periodico { background: #efe6cf; color: #1e1912; }
.ps-periodico .ps-d-columnas { left: 16px; right: 102px; bottom: 9px; height: 11px; opacity: .45;
  background: repeating-linear-gradient(#1e1912 0 1px, transparent 1px 3px), linear-gradient(90deg, transparent 32%, #efe6cf 32% 35%, transparent 35% 65%, #efe6cf 65% 68%, transparent 68%);
  background-blend-mode: lighten; }
.ps-periodico .ps-texto { top: 8px; bottom: 22px; justify-items: stretch; gap: 3px; }
.ps-periodico .ps-marca { text-align: center; padding: 2px 0 3px; border-top: 1px solid #1e1912; border-bottom: 3px double #1e1912; font: 400 16px/1 UnifrakturMaguntia, "Old English Text MT", serif; letter-spacing: 0; text-transform: none; }
.ps-periodico .ps-titulo { text-align: center; font: 900 14px/1.05 "Playfair Display", Georgia, serif; text-transform: uppercase; }
/* Sobria: gris claro, rótulo y botón con el color de acento */
.ps-sobria { background: #f3f5f8; color: #111827; }
.ps-sobria .ps-d-boton { left: 16px; bottom: 12px; width: 46px; height: 9px; border-radius: 3px; background: var(--marca, #2f6fdf); }
.ps-sobria .ps-texto { bottom: 26px; }
.ps-sobria .ps-marca { color: var(--marca, #2f6fdf); }
.ps-sobria .ps-titulo { font: 700 19px/1.08 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
/* Alegría: crema cálida con manchas de color, tres puntos y aro coral */
.ps-alegria { background: radial-gradient(55% 95% at 80% 0%, #ffe0d3 0%, transparent 70%), radial-gradient(45% 80% at 15% 110%, #d6f4e6 0%, transparent 70%), #fffaf6; color: #1f2333; }
.ps-alegria .ps-d-puntos { left: 16px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #ff6b57; box-shadow: 9px 0 #ffc845, 18px 0 #3ccf91; }
.ps-alegria .ps-d-aro { right: 82px; top: -18px; width: 46px; height: 46px; border-radius: 50%; border: 6px solid color-mix(in srgb, var(--marca, #ff6b57) 22%, transparent); }
.ps-alegria .ps-texto { top: 20px; }
.ps-alegria .ps-marca { color: var(--marca, #ff6b57); font: 700 8.5px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .02em; text-transform: none; }
.ps-alegria .ps-titulo { font: 800 20px/1.04 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.025em; }
/* Bosque: blanco roto con el panel verde (y su arco) donde está el guía, y una hoja */
.ps-bosque { background: #f3f0e6; color: #1f3a2b; }
.ps-bosque .ps-d-panel { right: 0; top: 0; bottom: 0; width: 104px; background: var(--marca, #2e5e45); }
.ps-bosque .ps-d-panel::before { content: ""; position: absolute; left: 12px; right: 12px; top: 12px; bottom: -2px; border: 1px solid rgba(255,255,255,.35); border-bottom: 0; border-radius: 40px 40px 0 0; }
.ps-bosque .ps-d-hoja { right: 116px; top: 9px; width: 14px; height: 14px; border: 1.5px solid #8fae99; border-radius: 0 100% 0 100%; transform: rotate(-20deg); }
.ps-bosque .ps-d-hoja::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid #8fae99; transform: rotate(-45deg); }
.ps-bosque .ps-texto { right: 116px; }
.ps-bosque .ps-marca { color: #6f8c78; }
.ps-bosque .ps-titulo { font: 300 21px/1.05 Fraunces, Georgia, serif; letter-spacing: -.01em; }
/* Brisa: azul cielo muy claro con líneas de viento y título ligero */
.ps-brisa { background: linear-gradient(180deg, #f5faff, #e3effb); color: #1d3047; }
.ps-brisa .ps-d-ondas { left: -20%; right: -20%; bottom: -46px; height: 70px; border-radius: 50%; border-top: 1px solid rgba(42,134,209,.28); }
.ps-brisa .ps-d-ondas::before { content: ""; position: absolute; left: 6%; right: 6%; top: 9px; height: 70px; border-radius: 50%; border-top: 1px solid rgba(42,134,209,.18); }
.ps-brisa .ps-marca { color: var(--marca, #2a86d1); }
.ps-brisa .ps-marca::before { content: "— "; }
.ps-brisa .ps-titulo { font: 300 22px/1.04 Manrope, system-ui, sans-serif; letter-spacing: -.02em; }
/* Aurora: degradado de amanecer y un icono en degradado */
.ps-aurora { background: radial-gradient(70% 130% at 0% 0%, #cbb9f8 0%, transparent 62%), radial-gradient(60% 130% at 100% 15%, #f9c8de 0%, transparent 66%), radial-gradient(70% 110% at 55% 125%, #bcd9fb 0%, transparent 72%), #efe9fb; color: #1e1b3a; }
.ps-aurora .ps-d-icono { left: 16px; top: 10px; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--marca, #6c4fd6), #e47ac0); box-shadow: 0 2px 6px rgba(108,79,214,.35); }
.ps-aurora .ps-texto { top: 22px; }
.ps-aurora .ps-marca { color: color-mix(in srgb, var(--marca, #6c4fd6) 80%, #000); }
.ps-aurora .ps-titulo { font: 600 19px/1.08 Sora, system-ui, sans-serif; letter-spacing: -.025em; }
/* Arena: papel color tierra, círculo oliva y arco terracota tras el guía */
.ps-arena { background: #ece3d3; color: #3b2d22; }
.ps-arena .ps-d-sol { right: 70px; top: 14px; width: 42px; height: 42px; border-radius: 50%; background: #7f8150; }
.ps-arena .ps-d-arco { right: 8px; bottom: 0; width: 86px; height: 84px; border-radius: 43px 43px 0 0; background: var(--marca, #b85c38); }
.ps-arena .ps-texto { right: 118px; }
.ps-arena .ps-marca { color: var(--marca, #b85c38); font: 600 8px/1.3 "DM Sans", system-ui, sans-serif; }
.ps-arena .ps-titulo { font: 400 20px/1.06 Fraunces, Georgia, serif; letter-spacing: -.01em; }
/* Océano: azul marino con olas aguamarina */
.ps-oceano { background: linear-gradient(160deg, #143a68, #0b2443); color: #fff; }
.ps-oceano .ps-d-olas { left: 0; right: 0; bottom: 0; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q25 0 50 8 T100 8 T150 8 T200 8 V20 H0Z' fill='%231fae9f' opacity='.45'/%3E%3Cpath d='M0 13 Q25 6 50 13 T100 13 T150 13 T200 13 V20 H0Z' fill='%23137f8a'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.ps-oceano .ps-d-logo { left: 16px; top: 10px; width: 14px; height: 14px; border-radius: 4px; background: var(--marca, #1fae9f); }
.ps-oceano .ps-texto { top: 22px; bottom: 18px; }
.ps-oceano .ps-marca { color: #8fdcd2; }
.ps-oceano .ps-titulo { font: 800 20px/1.04 Archivo, "Helvetica Neue", system-ui, sans-serif; letter-spacing: -.015em; }
/* Grafito: oscuro con retícula fina, letra mono y un solo acento */
.ps-grafito { background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 18px, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 18px 100%, #141518; color: #ececec; }
.ps-grafito .ps-d-punto { left: 16px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--marca, #c9e265); box-shadow: 0 0 8px var(--marca, #c9e265); }
.ps-grafito .ps-texto { top: 20px; }
.ps-grafito .ps-marca { color: var(--marca, #c9e265); font: 500 7.5px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; }
.ps-grafito .ps-marca::before { content: "— "; }
.ps-grafito .ps-titulo { font: 500 20px/1.06 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.015em; }
/* Cítrico: blanco luminoso, etiqueta lima y bloques naranja y lima */
.ps-citrico { background: #fbfbf6; color: #111; }
.ps-citrico .ps-d-bloques { right: 14px; top: 10px; width: 62px; height: 54px; border-radius: 14px; background: var(--marca, #ff6a2c); box-shadow: -30px 40px 0 -8px #dbf24a; }
.ps-citrico .ps-marca { background: #dbf24a; color: #1a1a1a; padding: 1px 7px; border-radius: 999px; font: 700 8px/1.4 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.ps-citrico .ps-titulo { font: 800 21px/.98 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.035em; }
/* v1.52: Marfil: marfil cálido, filete fino y serifa editorial */
.ps-marfil { background: #f6f1e7; color: #2b2620; }
.ps-marfil .ps-d-filete { left: 16px; right: 16px; top: 12px; height: 0; border-top: 1px solid var(--marca, #9a7b4f); }
.ps-marfil .ps-texto { top: 22px; }
.ps-marfil .ps-marca { color: var(--marca, #9a7b4f); font: 600 7.5px/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: .16em; }
.ps-marfil .ps-titulo { font: 400 21px/1.04 Newsreader, Georgia, serif; letter-spacing: -.01em; }
/* Acero: rejilla suiza, azul acero y panel lateral */
.ps-acero { background: #eef1f4; color: #17212b; }
.ps-acero .ps-d-panel { left: 0; top: 0; bottom: 0; width: 6px; background: var(--marca, #3a5f86); }
.ps-acero .ps-marca { color: var(--marca, #3a5f86); font: 600 7.5px/1.3 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: .12em; }
.ps-acero .ps-titulo { font: 600 20px/1.04 "IBM Plex Sans", system-ui, sans-serif; letter-spacing: -.02em; }
/* Salvia: verde salvia y blanco hueso */
.ps-salvia { background: #f4f2ec; color: #1f2b25; }
.ps-salvia .ps-d-logo { left: 16px; top: 10px; width: 14px; height: 14px; border-radius: 4px; background: var(--marca, #5b7f6a); }
.ps-salvia .ps-texto { top: 22px; }
.ps-salvia .ps-marca { color: var(--marca, #5b7f6a); font: 600 8px/1.3 Figtree, system-ui, sans-serif; }
.ps-salvia .ps-titulo { font: 600 20px/1.04 Figtree, system-ui, sans-serif; letter-spacing: -.015em; }
/* Nogal: nogal oscuro, crema y cobre con marco doble */
.ps-nogal { background: #2a1c13; color: #f3ebdd; }
.ps-nogal .ps-d-marco { inset: 7px; border: 1px solid var(--marca, #b8743d); outline: 1px solid var(--marca, #b8743d); outline-offset: 2px; border-radius: 2px; }
.ps-nogal .ps-d-filete { left: 18px; top: 18px; width: 24px; height: 0; border-top: 1px solid var(--marca, #b8743d); }
.ps-nogal .ps-texto { top: 24px; }
.ps-nogal .ps-marca { color: #d9a877; font: 600 7.5px/1.3 "Source Sans 3", system-ui, sans-serif; letter-spacing: .16em; }
.ps-nogal .ps-titulo { font: 400 19px/1.08 "Libre Caslon Text", Georgia, serif; }
/* Niebla: grises perla y un punto de acento */
.ps-niebla { background: linear-gradient(160deg, #f5f5f4, #e7e7e5); color: #1c1c1c; }
.ps-niebla .ps-d-punto { left: 16px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--marca, #6b7cff); }
.ps-niebla .ps-texto { top: 22px; }
.ps-niebla .ps-marca { color: #7b7b78; font: 300 8px/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: .1em; }
.ps-niebla .ps-titulo { font: 300 21px/1.06 "Inter Tight", system-ui, sans-serif; letter-spacing: -.02em; }
/* Zafiro: azul zafiro, blanco y plata */
.ps-zafiro { background: linear-gradient(180deg, #0f2f6b 0 34%, #fff 34%); color: #13213d; }
.ps-zafiro .ps-d-logo { left: 16px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--marca, #2c5fd0); }
.ps-zafiro .ps-texto { top: 34%; padding-top: 8px; }
.ps-zafiro .ps-marca { color: var(--marca, #2c5fd0); font: 700 7.5px/1.3 "Public Sans", system-ui, sans-serif; letter-spacing: .12em; }
.ps-zafiro .ps-titulo { font: 700 18px/1.06 "Public Sans", system-ui, sans-serif; letter-spacing: -.015em; }
/* Voltio: neobrutalismo, filete negro, sombra dura y pegatina amarilla */
.ps-voltio { background: radial-gradient(#0002 1px, transparent 1px) 0 0 / 10px 10px, #fff; color: #000; }
.ps-voltio .ps-d-sello { right: 12px; top: 10px; width: 34px; height: 34px; background: var(--marca, #ffe14d); border: 2px solid #000; box-shadow: 3px 3px 0 #000; transform: rotate(12deg);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 40%, 85% 56%, 96% 76%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 76%, 15% 56%, 0 40%, 20% 32%, 18% 10%, 39% 18%); }
.ps-voltio .ps-marca { display: inline-block; background: var(--marca, #ffe14d); color: #000; border: 1.5px solid #000; padding: 1px 6px; font: 700 7.5px/1.4 "Space Grotesk", system-ui, sans-serif; transform: rotate(-2deg); }
.ps-voltio .ps-titulo { font: 400 21px/.98 "Archivo Black", Impact, sans-serif; font-synthesis-weight: none; letter-spacing: -.02em; }
/* Origami: papeles de colores con la esquina doblada */
.ps-origami { background: #fbf6ee; color: #2a2238; }
.ps-origami .ps-d-bloques { right: 14px; top: 10px; width: 44px; height: 44px; background: var(--marca, #e8664e); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  box-shadow: -18px 22px 0 -6px #f5c04a; }
.ps-origami .ps-d-bloques::after { content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 30%; background: #00000033; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ps-origami .ps-marca { color: var(--marca, #c4492f); font: 600 8px/1.3 Lexend, system-ui, sans-serif; }
.ps-origami .ps-titulo { font: 700 19px/1.06 Lexend, system-ui, sans-serif; letter-spacing: -.02em; }
/* Holograma: negro con brillo iridiscente */
.ps-holograma { background: radial-gradient(circle at 80% 20%, #8b7bff55, transparent 45%), radial-gradient(circle at 20% 90%, #2de2e655, transparent 45%), radial-gradient(circle at 60% 70%, #ff6fd855, transparent 40%), #07070d; color: #fff; }
.ps-holograma .ps-d-punto { left: 16px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: conic-gradient(#2de2e6, #8b7bff, #ff6fd8, #ffd36f, #2de2e6); box-shadow: 0 0 10px #8b7bff; }
.ps-holograma .ps-texto { top: 20px; }
.ps-holograma .ps-marca { color: #b9b2ff; font: 600 7.5px/1.3 Inter, system-ui, sans-serif; letter-spacing: .14em; }
.ps-holograma .ps-titulo { font: 600 18px/1.06 Unbounded, system-ui, sans-serif; letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff, #c9c2ff 45%, #9ff3f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Mosaico: Bauhaus, formas planas en primarios */
.ps-mosaico { background: #f3ecdf; color: #111; }
.ps-mosaico .ps-d-bloques { right: 12px; top: 10px; width: 46px; height: 46px; border-radius: 50%; background: #d4351f; border: 2px solid #111;
  box-shadow: -26px 26px 0 -10px #f6c445, -26px 26px 0 -8px #111; }
.ps-mosaico .ps-d-bloques::after { content: ""; position: absolute; left: 50%; top: -2px; width: 50%; height: calc(100% + 4px); background: var(--marca, #2346d8); border-radius: 0 999px 999px 0; border: 2px solid #111; border-left: 0; box-sizing: border-box; }
.ps-mosaico .ps-marca { color: #d4351f; font: 700 8px/1.3 Syne, system-ui, sans-serif; letter-spacing: .08em; }
.ps-mosaico .ps-titulo { font: 700 19px/1.02 Syne, system-ui, sans-serif; letter-spacing: -.02em; }
/* En la vista de lista (miniatura de 96×64): el fondo, sus detalles y «Aa» con la letra del título */
.en-lista .portada-skin { border-right: 0; border-bottom: 0; }
.en-lista .portada-skin .ps-texto { display: none; }
.en-lista .portada-skin .ps-letra { display: grid; place-items: center; position: absolute; inset: 0; z-index: 2; font-size: 24px; }
.en-lista .ps-d-dado, .en-lista .ps-d-x, .en-lista .ps-d-ruta, .en-lista .ps-d-nube, .en-lista .ps-d-hoja, .en-lista .ps-d-columnas, .en-lista .ps-d-boton { display: none; }
.en-lista .ps-serie .ps-letra { font: 400 30px/1 "Bebas Neue", Impact, sans-serif; }
.en-lista .ps-juego .ps-d-caja { inset: 7px; }
.en-lista .ps-juego .ps-letra { font: 400 22px/1 "Lilita One", sans-serif; }
.en-lista .ps-mapa .ps-letra { font: 400 24px/1 "IM Fell English SC", Georgia, serif; color: var(--marca, #8e2a1b); }
.en-lista .ps-album .ps-letra { font: 400 22px/1 "Luckiest Guy", sans-serif; color: var(--marca, #ffd23f); text-shadow: 0 2px 0 #6e3200; }
.en-lista .ps-album .ps-d-sello { right: 5px; top: 5px; width: 14px; height: 14px; }
.en-lista .ps-niveles .ps-letra { font: 700 22px/1 Fredoka, sans-serif; text-shadow: 0 2px 0 #6b3a00, 1px 0 0 #6b3a00, -1px 0 0 #6b3a00; bottom: 14px; }
.en-lista .ps-niveles .ps-d-bloque { right: 5px; top: 5px; width: 14px; height: 14px; font-size: 7px; line-height: 10px; border-width: 1.5px; }
.en-lista .ps-revista .ps-letra { font: 400 24px/1 "Abril Fatface", Georgia, serif; color: var(--marca, #d7141f); }
.en-lista .ps-revista .ps-d-sello { right: 4px; top: auto; bottom: 4px; width: 16px; height: 16px; }
.en-lista .ps-revista .ps-d-sello::before { content: none; }
.en-lista .ps-expediente .ps-d-carpeta { left: 8px; right: 10px; top: 14px; }
.en-lista .ps-expediente .ps-d-carpeta::before { width: 34px; }
.en-lista .ps-expediente .ps-letra { font: 400 20px/1 "Special Elite", monospace; top: 12px; }
.en-lista .ps-lujo .ps-d-filete { inset: 5px; }
.en-lista .ps-lujo .ps-letra { font: 400 28px/1 "Cormorant Garamond", Georgia, serif; }
.en-lista .ps-periodico .ps-letra { font: 400 26px/1 UnifrakturMaguntia, serif; }
.en-lista .ps-sobria .ps-letra { font: 700 22px/1 Inter, system-ui, sans-serif; color: var(--marca, #2f6fdf); }
.en-lista .ps-alegria .ps-d-puntos { left: 7px; top: 7px; width: 5px; height: 5px; box-shadow: 7px 0 #ffc845, 14px 0 #3ccf91; }
.en-lista .ps-alegria .ps-d-aro { right: -16px; top: -16px; }
.en-lista .ps-alegria .ps-letra { font: 800 22px/1 "Plus Jakarta Sans", sans-serif; }
.en-lista .ps-bosque .ps-d-panel { width: 30%; }
.en-lista .ps-bosque .ps-d-panel::before { left: 5px; right: 5px; top: 8px; border-radius: 20px 20px 0 0; }
.en-lista .ps-bosque .ps-letra { font: 300 24px/1 Fraunces, Georgia, serif; right: 30%; }
.en-lista .ps-brisa .ps-letra { font: 300 24px/1 Manrope, sans-serif; color: #1d3047; }
.en-lista .ps-aurora .ps-d-icono { left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; }
.en-lista .ps-aurora .ps-letra { font: 600 22px/1 Sora, sans-serif; }
.en-lista .ps-arena .ps-d-sol { right: 30px; top: 6px; width: 22px; height: 22px; }
.en-lista .ps-arena .ps-d-arco { right: 6px; width: 34px; height: 44px; border-radius: 17px 17px 0 0; }
.en-lista .ps-arena .ps-letra { font: 400 22px/1 Fraunces, Georgia, serif; right: 45%; }
.en-lista .ps-oceano .ps-d-olas { height: 14px; }
.en-lista .ps-oceano .ps-d-logo { left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; }
.en-lista .ps-oceano .ps-letra { font: 800 22px/1 Archivo, sans-serif; bottom: 8px; }
.en-lista .ps-grafito .ps-d-punto { left: 7px; top: 7px; }
.en-lista .ps-grafito .ps-letra { font: 500 22px/1 "Space Grotesk", sans-serif; }
.en-lista .ps-citrico .ps-d-bloques { right: 6px; top: 6px; width: 26px; height: 24px; border-radius: 7px; box-shadow: -14px 22px 0 -4px #dbf24a; }
.en-lista .ps-citrico .ps-letra { font: 800 22px/1 "Bricolage Grotesque", sans-serif; right: 30%; }
.en-lista .ps-marfil .ps-d-filete { left: 8px; right: 8px; top: 7px; }
.en-lista .ps-marfil .ps-letra { font: 400 26px/1 Newsreader, Georgia, serif; }
.en-lista .ps-acero .ps-d-panel { width: 4px; }
.en-lista .ps-acero .ps-letra { font: 600 22px/1 "IBM Plex Sans", sans-serif; color: var(--marca, #3a5f86); }
.en-lista .ps-salvia .ps-d-logo { left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 3px; }
.en-lista .ps-salvia .ps-letra { font: 600 22px/1 Figtree, sans-serif; }
.en-lista .ps-nogal .ps-d-marco { inset: 5px; outline-offset: 1px; }
.en-lista .ps-nogal .ps-d-filete { display: none; }
.en-lista .ps-nogal .ps-letra { font: 400 22px/1 "Libre Caslon Text", Georgia, serif; color: #d9a877; }
.en-lista .ps-niebla .ps-d-punto { left: 7px; top: 7px; }
.en-lista .ps-niebla .ps-letra { font: 300 24px/1 "Inter Tight", sans-serif; }
.en-lista .ps-zafiro .ps-d-logo { left: 6px; top: 5px; width: 10px; height: 10px; box-shadow: inset 0 0 0 2px var(--marca, #2c5fd0); }
.en-lista .ps-zafiro .ps-letra { font: 700 22px/1 "Public Sans", sans-serif; top: 30%; color: #0f2f6b; }
.en-lista .ps-voltio .ps-d-sello { right: 5px; top: 5px; width: 18px; height: 18px; border-width: 1.5px; box-shadow: 2px 2px 0 #000; }
.en-lista .ps-voltio .ps-letra { font: 400 24px/1 "Archivo Black", Impact, sans-serif; font-synthesis-weight: none; }
.en-lista .ps-origami .ps-d-bloques { right: 6px; top: 6px; width: 22px; height: 22px; box-shadow: -10px 12px 0 -3px #f5c04a; }
.en-lista .ps-origami .ps-letra { font: 700 22px/1 Lexend, sans-serif; right: 30%; }
.en-lista .ps-holograma .ps-d-punto { left: 7px; top: 7px; }
.en-lista .ps-holograma .ps-letra { font: 600 20px/1 Unbounded, sans-serif; color: #c9c2ff; }
.en-lista .ps-mosaico .ps-d-bloques { right: 5px; top: 5px; width: 22px; height: 22px; border-width: 1.5px; box-shadow: -12px 12px 0 -5px #f6c445, -12px 12px 0 -4px #111; }
.en-lista .ps-mosaico .ps-d-bloques::after { border-width: 1.5px; top: -1.5px; height: calc(100% + 3px); }
.en-lista .ps-mosaico .ps-letra { font: 700 22px/1 Syne, sans-serif; right: 30%; }

/* v0.86: personajes en dos niveles (origen arriba, partes del avatar debajo) y casillas de la imagen propia */
.subpestanas-aspecto { margin-top: -.2rem; padding-top: .3rem; border-top: 0; }
.subpestanas-aspecto .pestana-boton { font-size: .85rem; padding: .3rem .6rem; }
.subpestanas-aspecto[hidden] { display: none; }
.checks-propia { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .7rem; }
.checks-propia .check { display: inline-flex; gap: .45rem; align-items: center; font-size: .9rem; margin: 0; width: auto; }
.checks-propia .check input { width: auto; height: auto; flex: none; margin: 0; }

/* v0.88: biblioteca ilustrada */
.op-ilustrado .op-dibujo { aspect-ratio: 3 / 4; }
.op-ilustrado .op-dibujo img { object-fit: cover; object-position: 50% 0; }
.ejemplo-estilo img.ejemplo-ilustrado { object-fit: cover; object-position: 50% 0; }
.bib-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 1.5rem; margin: .4rem 0 .8rem; }
.bib-resumen { margin: 0; }
.bib-cab .fila-conector { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.bib-barra { height: 8px; border-radius: 99px; background: var(--borde); overflow: hidden; margin: .6rem 0 .2rem; }
.bib-barra[hidden] { display: none; }
.bib-barra span { display: block; height: 100%; width: 0; background: var(--acento); transition: width .4s; }
.bib-coleccion h3 { margin: 1.4rem 0 .6rem; font-size: 1rem; }
.bib-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.bib-ficha { border: 1px solid var(--borde); border-radius: 10px; padding: .5rem; background: var(--superficie); display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.bib-ficha.completo { border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.bib-retrato { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 8%, transparent); }
.bib-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.bib-gestos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.bib-gesto { padding: 0; border: 1px solid var(--borde); border-radius: 6px; background: transparent; aspect-ratio: 1; overflow: hidden; cursor: pointer; color: var(--tinta-2); }
.bib-gesto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.bib-gesto:disabled { cursor: default; opacity: .6; }
.bib-ampliar { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.bib-ampliar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bib-ver { border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.2rem; background: var(--superficie, #fff); color: var(--tinta); width: min(94vw, 560px); max-height: 94vh; }
.bib-ver::backdrop { background: rgba(10,14,22,.7); }
.bib-ver h3 { margin: 0 0 .6rem; text-transform: capitalize; }
.bib-ver-img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#0000000d 0 25%, transparent 0 50%) 0 0 / 18px 18px; }
.bib-ver-tira { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: .7rem 0; }
.bib-ver-tira .bib-gesto.activo { outline: 2px solid var(--acento, #e0a23a); outline-offset: 1px; }
.bib-ver-pie { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.bib-nuevo-caja { border: 1px dashed var(--borde); border-radius: 10px; padding: .6rem .9rem; margin: .4rem 0 1rem; background: var(--superficie); }
.bib-nuevo-caja summary { cursor: pointer; font-weight: 600; }
.bib-nuevo { display: grid; gap: .7rem; margin-top: .8rem; }
.bib-nuevo-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.bib-nuevo textarea { width: 100%; }
.bib-nuevo-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.bib-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; line-height: 1.3; }
.bib-quitar { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--tinta-2); font-size: .78rem; text-decoration: underline; cursor: pointer; }
.bib-ficha.propio { border-style: dashed; }
/* v0.95: hacia dónde mira cada ilustración */
.bib-mira { display: flex; align-items: center; gap: 3px; font-size: .75rem; }
.bib-mira .sutil { margin-right: auto; }
.bib-mira-op { width: 28px; height: 24px; padding: 0; border: 1px solid var(--borde); border-radius: 6px; background: transparent; color: var(--tinta-2); cursor: pointer; font-size: .85rem; line-height: 1; }
.bib-mira-op.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.bib-ficha.sin-mira { border-color: #e08a2c; box-shadow: 0 0 0 1px #e08a2c inset; }
.bib-aviso-mira { margin: .4rem 0; padding: .5rem .8rem; border-radius: 8px; background: color-mix(in srgb, #e08a2c 14%, transparent); font-size: .9rem; }
.bib-aviso-mira[hidden] { display: none; }

/* v0.89: skins de portada y menú */
.elecciones-skin .elecciones { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.miniatura-skin { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--acento) 10%, #1d2433); }
.miniatura-skin img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* v0.90: muestra en grande del skin elegido */
.vista-skin { margin-top: 1rem; padding: 1rem; border-radius: 12px; background: color-mix(in srgb, var(--acento) 6%, transparent); border: 1px solid color-mix(in srgb, var(--acento) 18%, transparent); }
.vista-skin-titulo { margin: 0 0 .7rem; }
.vista-skin-par { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.vista-skin figure { margin: 0; }
.vista-skin img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); background: #1d2433; }
.vista-skin figcaption { font-size: .85rem; opacity: .75; margin-top: .35rem; text-align: center; }
@media (max-width: 640px) { .vista-skin-par { grid-template-columns: 1fr; } }
/* v0.91: políticas de uso */
.pol-pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .6rem; }
.pol-pestanas .activa { border-color: var(--acento); color: var(--acento); font-weight: 600; }
.pol-secciones { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .9rem; }
.pol-seccion { display: grid; gap: .4rem; }
.pol-seccion-cab { display: flex; gap: .4rem; align-items: center; }
.pol-seccion-cab input { flex: 1; font-weight: 600; min-width: 0; }
.pol-seccion textarea { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.5; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.15rem; margin: 1.8rem 0 .4rem; }
.legal p { line-height: 1.6; }
.legal-otro { margin-top: 2.5rem; }
.casilla-legal { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; margin: .4rem 0 .2rem; }
.casilla-legal input { width: auto; flex: none; margin: .2rem 0 0; }
.casilla-legal span { flex: 1; }
.pie-legal { text-align: center; font-size: .8rem; margin: 1.2rem 0 0; }
.pie-app { text-align: center; font-size: .78rem; padding: 1.5rem 1rem; color: var(--tinta-2); }
.pie-app a { color: inherit; }

/* v0.96: pestaña Vista previa a lo grande */
.panel-vista-grande .vista-previa-grande { width: 100%; height: max(520px, calc(100vh - 290px)); border: 1px solid var(--borde); border-radius: 10px; background: #000; display: block; }
/* v0.98: iconos de línea en las pestañas del editor */
.pestana-icono { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pestana[aria-selected="true"] .pestana-icono { opacity: 1; color: var(--acento); }
.subpestanas .pestana-icono { width: 16px; height: 16px; }
.subpestanas .pestana { display: inline-flex; align-items: center; gap: .4rem; }
/* v1.00: locución con IA */
.voces-locucion { display: grid; gap: .5rem; margin: .4rem 0 .6rem; }
.fila-voz { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.fila-voz .nombre-voz { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-voz select { min-width: 0; }
.boton-oir { display: inline-flex; align-items: center; gap: .35rem; }
.estado-locucion { font-weight: 600; margin: .2rem 0 .4rem; }
.ok-locucion { color: #2f7a4b; font-weight: 600; }
.progreso-locucion { display: grid; gap: .5rem; }
.barra-locucion { height: 10px; border-radius: 6px; background: #ece4d6; overflow: hidden; }
.barra-locucion span { display: block; height: 100%; width: 0; background: var(--primario, #c0703a); transition: width .4s; }
@media (max-width: 600px) { .fila-voz { grid-template-columns: 1fr auto; } .fila-voz .nombre-voz { grid-column: 1 / -1; } }
/* v1.01: motores de texto en Conectores de IA */
.motores-texto { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; margin: .6rem 0 .9rem; }
.motor-op { display: flex; gap: .55rem; align-items: center; border: 1px solid var(--borde); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; background: var(--superficie); }
.motor-op:has(input:checked) { border-color: var(--primario, #c0703a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario, #c0703a) 25%, transparent); }
.motor-op input { width: auto; margin: 0; flex: none; }
.motor-op span { display: grid; line-height: 1.25; text-align: left; flex: 1; }
.motor-op small { color: var(--texto-suave, #776); }
.ficha-motor { border-top: 1px solid var(--borde); padding: .5rem 0; }
.ficha-motor summary { cursor: pointer; padding: .2rem 0; }
.ficha-motor[open] summary { margin-bottom: .6rem; }

/* v1.02: voces propias en el panel de administración */
.voces-propias { display: grid; gap: 8px; margin: 8px 0; }
.voz-propia { display: grid; grid-template-columns: 1.4fr 1fr auto 1.4fr auto auto; gap: 6px; align-items: center; }
.voz-propia input, .voz-propia select { width: 100%; min-width: 0; }
.voz-propia .salida-conector { grid-column: 1 / -1; }
.voz-propia .salida-conector:empty { display: none; }
@media (max-width: 760px) { .voz-propia { grid-template-columns: 1fr 1fr; } }

/* v1.03: portada comercial con capturas reales */
.portada { max-width: 1200px; }
.heroe-v2 { grid-template-columns: 1fr 1.15fr; gap: 3.5rem; padding: 4rem 0 3rem; }
.heroe-v2 h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.heroe-pantalla { position: relative; padding: 0 0 2.5rem 0; }
.pantalla-marco { border-radius: 14px; overflow: hidden; background: #0a0e16; border: 1px solid #2c3547; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.pantalla-barra { display: flex; gap: 6px; padding: 9px 12px; background: #1a2131; }
.pantalla-barra i { width: 10px; height: 10px; border-radius: 50%; background: #3a4458; }
.pantalla-barra i:first-child { background: #e0685a; } .pantalla-barra i:nth-child(2) { background: #e0a23a; } .pantalla-barra i:nth-child(3) { background: #5fb07a; }
.pantalla-pases { position: relative; aspect-ratio: 16 / 10; }
.pantalla-pases img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.pantalla-pases img.visible { opacity: 1; }
.heroe-movil { position: absolute; right: -18px; bottom: 0; width: 22%; height: auto; border-radius: 18px; border: 5px solid #05070b; box-shadow: 0 24px 50px rgba(0,0,0,.6); background: #000; }
.sellos { list-style: none; margin: 0 0 1rem; padding: 1.2rem 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; border-top: 1px solid #1f2738; }
.sellos li { color: #a3a9b6; font-size: .88rem; line-height: 1.35; }
.sellos b { display: block; font-family: var(--f-marca); font-size: 1.7rem; color: #e0a23a; line-height: 1.1; }
.funcion { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: center; padding: 2.5rem 0; }
.funcion.invertida > :first-child { order: 2; }
.funcion h3 { font-family: var(--f-marca); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; margin: 0 0 .8rem; }
.funcion-texto > p:not(.eyebrow) { color: #c3c7d0; margin: 0 0 1rem; }
.ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ventajas li { position: relative; padding-left: 1.6rem; color: #ece6d8; font-size: .95rem; }
.ventajas li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1rem; height: 1rem; border-radius: 50%; background: rgba(224,162,58,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e3a945' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 75% no-repeat; }
.captura { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #2c3547; box-shadow: 0 24px 60px rgba(0,0,0,.45); background: #fff; }
.captura img { display: block; width: 100%; height: auto; }
.mosaico-skins { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mosaico-skins img, .mosaico-retos img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid #2c3547; box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.mosaico-retos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.mosaico-retos figure { margin: 0; display: grid; gap: .35rem; }
.mosaico-retos figcaption { font-size: .78rem; color: #a3a9b6; text-align: center; }
.reparto { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; padding: 1rem; border-radius: 14px; background: radial-gradient(circle at 50% 0, #263049, #151b28); border: 1px solid #2c3547; }
.reparto figure { margin: 0; text-align: center; }
.reparto img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.reparto figcaption { font-size: .75rem; color: #a3a9b6; }
.voces-muestra { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.boton-voz { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid #4a5468; background: none; color: #ece6d8; border-radius: 99px; padding: .4rem .9rem; font: inherit; font-size: .88rem; cursor: pointer; }
.boton-voz span { color: #e0a23a; font-size: .75rem; }
.boton-voz:hover, .boton-voz.sonando { border-color: #e0a23a; color: #e0a23a; }
.ejemplos-v2 .ejemplo, .ejemplos-v2 .ejemplo:nth-child(n+4) { grid-column: span 3; }
.ejemplos-v2 .ejemplo-texto h3 { font-size: 1.12rem; }
.ejemplos-v2 .ejemplo-imagen { border-bottom: 1px solid #2c3547; }
.ejemplos-v2 .ejemplo-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .4s; }
.ejemplos-v2 .ejemplo:hover .ejemplo-imagen img { transform: scale(1.04); }
.perfiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.perfiles > div { display: grid; gap: .5rem; align-content: start; padding: 1.3rem; border-radius: 12px; background: linear-gradient(160deg, #1d2535, #151b28); border: 1px solid #2c3547; }
.perfiles b { font-size: 1.02rem; }
.perfiles span { color: #a3a9b6; font-size: .92rem; }
.faq { display: grid; gap: .6rem; max-width: 860px; }
.faq details { border: 1px solid #2c3547; border-radius: 10px; background: #151b28; padding: .2rem 1.1rem; }
.faq summary { cursor: pointer; font-weight: 600; padding: .8rem 0; }
.faq p { color: #c3c7d0; margin: 0 0 1rem; }
.cierre-portada .sutil { margin-top: -.6rem; }
.pie-portada a { color: #a3a9b6; }
.pie-portada p { margin: .2rem 0; }
.pie-portada p:first-child { color: #a3a9b6; }
.pie-ecosistema b { font-family: var(--f-logo); font-weight: 600; }
@media (max-width: 900px) {
  .heroe-v2, .funcion { grid-template-columns: 1fr; gap: 1.8rem; }
  .funcion.invertida > :first-child { order: 0; }
  .sellos { grid-template-columns: repeat(3, 1fr); }
  .perfiles { grid-template-columns: 1fr 1fr; }
  .reparto { grid-template-columns: repeat(4, 1fr); }
  .ejemplos-v2 { grid-template-columns: 1fr 1fr; }
  .ejemplos-v2 .ejemplo, .ejemplos-v2 .ejemplo:nth-child(n+4) { grid-column: auto; }
  .heroe-movil { right: 6px; }
}
@media (max-width: 560px) {
  .sellos, .perfiles, .ejemplos-v2 { grid-template-columns: 1fr 1fr; }
  .perfiles, .ejemplos-v2 { grid-template-columns: 1fr; }
  .mosaico-retos { grid-template-columns: 1fr 1fr; }
  .reparto { grid-template-columns: repeat(3, 1fr); }
}

/* v1.03: tabla de costes (portada y ayuda) */
.costes { --c-borde: var(--borde); --c-fondo: var(--superficie); --c-fondo-2: var(--superficie-2); display: grid; gap: 1.2rem; }
.costes-tabla-caja { overflow-x: auto; border: 1px solid var(--c-borde); border-radius: 12px; background: var(--c-fondo); }
.costes-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.costes-tabla th, .costes-tabla td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--c-borde); vertical-align: top; }
.costes-tabla tbody tr:last-child > * { border-bottom: 0; }
.costes-tabla thead th { font-size: .95rem; background: var(--c-fondo-2); }
.costes-tabla small { display: block; font-weight: 400; font-size: .8rem; color: var(--tinta-2); margin-top: .15rem; }
.costes-tabla td { white-space: nowrap; }
.costes-tabla td b { font-size: 1.05rem; }
.costes-tabla tbody th { font-weight: 600; max-width: 34ch; }
.costes-top { background: color-mix(in srgb, var(--acento) 10%, transparent); }
.costes-top td b { color: var(--acento); }
.costes-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.costes-lados > div { border: 1px solid var(--c-borde); border-radius: 12px; padding: 1rem 1.2rem; background: var(--c-fondo); }
.costes-lados h3 { font-size: 1rem; margin: 0 0 .6rem; }
.costes-lados ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.costes-extras li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.costes-extras li small { display: block; font-size: .8rem; color: var(--tinta-2); }
.costes-extras li b { white-space: nowrap; }
.costes-gratis li { padding-left: 1.4rem; position: relative; }
.costes-gratis li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .3rem; border-left: 2px solid #3f9b63; border-bottom: 2px solid #3f9b63; transform: rotate(-45deg); }
.costes-nota { font-size: .85rem; color: var(--tinta-2); margin: 0; }
@media (max-width: 700px) { .costes-lados { grid-template-columns: 1fr; } }

/* v1.05: iconos de línea dentro de botones (sustituyen a los emojis). */
.boton-icono-linea { width: 17px; height: 17px; opacity: 1; vertical-align: -3px; }
.boton-sec:has(> .boton-icono-linea), .boton-historial:has(> .boton-icono-linea) { display: inline-flex; align-items: center; gap: .45rem; }
button.icono > .boton-icono-linea { width: 18px; height: 18px; vertical-align: middle; }

/* v1.07: curso en blanco en el asistente. */
.bloque-blanco { border: 1px dashed var(--borde); border-radius: var(--radio); background: var(--superficie-2); padding: 1rem 1.1rem; }
.bloque-blanco p { margin: 0; }

/* v1.07: editor a pantalla completa. Árbol a la izquierda y el capítulo (o la ficha elegida) a la derecha. */
body.con-editor-completo { overflow: hidden; }
.editor-completo { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: auto 1fr; background: var(--fondo); }
.ec-cab { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.ec-marca { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta); font-weight: 700; font-size: 1rem; }
.ec-logo { width: 24px; height: 24px; flex: none; }
.ec-titulo { font-family: var(--f-marca); font-size: 1.2rem; font-weight: 700; flex: 1; min-width: 8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-estado .estado-guardado { font-size: .82rem; }
.ec-cab .boton, .ec-cab .boton-sec { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; }
.ec-cuerpo { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; min-height: 0; }
.ec-arbol { overflow-y: auto; border-right: 1px solid var(--borde); background: var(--superficie); padding: .7rem .6rem 2rem; display: grid; align-content: start; gap: .25rem; }
.ec-nodo { display: grid; gap: .05rem; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; color: var(--tinta); border-radius: 7px; padding: .4rem .55rem; cursor: pointer; font: inherit; }
.ec-nodo:hover { background: var(--superficie-2); }
.ec-nodo.activo { background: color-mix(in srgb, var(--acento-fuerte) 18%, var(--superficie)); border-color: color-mix(in srgb, var(--acento-fuerte) 55%, transparent); }
.ec-nodo-texto { font-weight: 600; font-size: .88rem; line-height: 1.3; }
.ec-nodo-sub { font-size: .76rem; color: var(--tinta-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ec-raiz .ec-nodo-texto { font-size: .9rem; }
.ec-cap { margin-top: .35rem; }
.ec-cap-fila { display: grid; grid-template-columns: 1.6rem 1fr; align-items: start; }
.ec-plegar { border: 0; background: transparent; color: var(--tinta-2); font-size: .95rem; padding: .45rem 0; cursor: pointer; border-radius: 6px; }
.ec-plegar:hover { color: var(--tinta); background: var(--superficie-2); }
.ec-bloques { list-style: none; margin: .1rem 0 .3rem 1.6rem; padding: 0 0 0 .5rem; border-left: 1px solid var(--borde); display: grid; gap: .1rem; }
.ec-bloques .ec-nodo { padding: .3rem .5rem; }
.ec-bloques .ec-nodo-texto { font-size: .74rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta-2); }
.ec-bloques .ec-reto .ec-nodo-texto { color: var(--acento); }
.ec-bloques .ec-nodo-sub { font-size: .8rem; color: var(--tinta); -webkit-line-clamp: 1; }
.ec-bloques .ec-nodo.activo .ec-nodo-texto { color: var(--acento); }
.ec-final > .ec-cap-fila .ec-nodo-texto { color: var(--acento); }
.ec-anadir { margin-top: .6rem; border: 1px dashed var(--borde); background: transparent; color: var(--tinta-2); border-radius: 7px; padding: .5rem; cursor: pointer; font: inherit; font-size: .85rem; }
.ec-anadir:hover { color: var(--acento); border-color: var(--acento); }
.ec-zona { overflow-y: auto; padding: 1.4rem clamp(1rem, 3vw, 3rem) 4rem; scroll-behavior: smooth; }
.ec-zona > * { max-width: 980px; margin-left: auto; margin-right: auto; }
.ec-panel { margin-top: 0; }
.bloque-ed.ec-marcado { outline: 2px solid var(--acento-fuerte); outline-offset: 3px; }
@media (max-width: 760px) {
  .ec-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38vh) 1fr; }
  .ec-arbol { border-right: 0; border-bottom: 1px solid var(--borde); }
  .ec-cab { gap: .4rem; padding: .5rem .7rem; }
  .ec-cab .ec-estado, .ec-marca span { display: none; }
  .ec-cab .boton.ec-probar span { display: inline; } /* v2.31: Probar, siempre a la vista */
  .ec-cab .boton-sec span, .ec-cab .boton span { display: none; }
  .ec-titulo { font-size: 1rem; }
  .ec-arbol { overflow-x: hidden; }
  .ec-zona { padding: 1rem .6rem 3rem; }
}
.boton-completo { display: inline-flex; align-items: center; gap: .4rem; }
.boton-completo + .previa-interruptor { margin-left: 0; }

/* v1.08: servicios de IA (escenarios, imágenes de apoyo, transcripción, música y efectos) */
.generador-ia { display: grid; gap: .45rem; justify-items: start; }
.generador-ia-cuerpo { width: 100%; }
.generador-ia-cuerpo { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.generador-ia-cuerpo[hidden] { display: none; }
.generador-ia .ia-desc { flex: 1 1 16rem; min-width: 0; }
.generador-ia .ia-estado:empty { display: none; }
.boton-ia { display: inline-flex; align-items: center; gap: .4rem; }
.boton-ia .boton-icono-linea { width: 1.05em; height: 1.05em; }
.fondos-ia { display: grid; gap: .45rem; padding: .8rem; margin-top: .6rem; border-radius: 10px; background: var(--superficie-2); }
.apoyo-ed .generador-ia { flex-basis: 100%; }
.pz-medios .generador-ia { flex-basis: 100%; }
.apoyo-rango { display: grid; gap: .3rem; margin: .4rem 0 0 2.8rem; }
.apoyo-rango[hidden] { display: none; }
.apoyo-fila { display: flex; align-items: center; gap: .8rem; }
.apoyo-fila input[type=range] { flex: 1; max-width: 22rem; accent-color: var(--acento-fuerte); }
.apoyo-cifra { min-width: 3.5rem; }
.transcribir-info { display: grid; gap: .55rem; margin-top: .8rem; justify-items: start; }
.transcribir-info p { margin: 0; }
.barra-progreso { width: 100%; height: 6px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--acento-fuerte); transition: width .3s; }
.segmento .boton-icono-linea { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .3rem; }
.musica-propia { display: grid; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.musica-propia h3 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: 1rem; }
.musica-propia h3 .boton-icono-linea { width: 1.1em; height: 1.1em; }
.musica-propia p { margin: 0; }
.musica-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.musica-fila > strong { min-width: 4.5rem; }
.musica-fila audio { height: 36px; max-width: 100%; }
.extras-ia { display: grid; gap: .55rem; margin-top: .4rem; }
@media (max-width: 760px) { .apoyo-rango { margin-left: 0; } }

/* v1.09: cara de cada personaje en Contenido › Locuciones (el narrador va sin imagen) */
.fila-voz { grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto; }
.fila-voz .nombre-voz { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.fila-voz .nombre-voz > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fila-voz .cara-voz { flex: none; width: 44px; height: 44px; border-width: 2px; }
.fila-voz .cara-voz svg { width: 100%; height: 100%; display: block; }
.fila-voz .cara-voz.vacia { display: inline-block; width: 44px; height: 44px; flex: none; }

/* v1.09: portada como landing ligera (posibilidades, para quién, tres pasos), sin precios */
.portada-v3 .seccion-cab.centrada { margin: 0 auto 2.4rem; text-align: center; }
.portada-v3 .seccion { padding: 4.2rem 0; }
.posibilidades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.posibilidad { display: grid; gap: .5rem; align-content: start; padding: 1.4rem 1.3rem 1.5rem; border-radius: 16px; background: linear-gradient(165deg, #1d2535, #141a26); border: 1px solid #2c3547; transition: transform .2s, border-color .2s; }
.posibilidad:hover { transform: translateY(-3px); border-color: rgba(224,162,58,.55); }
.posibilidad h3 { font-size: 1.05rem; margin: .2rem 0 0; }
.posibilidad p { margin: 0; color: #a3a9b6; font-size: .92rem; line-height: 1.5; }
.posibilidad-icono, .paso-icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: rgba(224,162,58,.12); color: #e0a23a; }
.icono-linea { width: 24px; height: 24px; }
.franja-visual { padding: 1rem 0 3rem !important; border-top: 0 !important; overflow: hidden; }
.franja { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; }
.franja figure { margin: 0; scroll-snap-align: start; display: grid; gap: .5rem; }
.franja img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid #2c3547; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.franja figcaption { color: #a3a9b6; font-size: .88rem; text-align: center; }
.audiencias { display: grid; gap: 3rem; }
.audiencia { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.audiencia.invertida figure { order: 2; }
.audiencia figure { margin: 0; }
.audiencia figure img { display: block; width: 100%; border-radius: 14px; border: 1px solid #2c3547; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.audiencia h3 { font-family: var(--f-marca); font-size: clamp(1.4rem, 2.8vw, 1.9rem); margin: .3rem 0 .7rem; }
.audiencia-texto > p:not(.eyebrow) { color: #c3c7d0; font-size: 1.02rem; }
.lista-ok { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.lista-ok li { display: flex; gap: .55rem; align-items: flex-start; }
.lista-ok .icono-linea { width: 20px; height: 20px; color: #e0a23a; flex: none; margin-top: .1rem; }
.tres-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; counter-reset: paso; }
.tres-pasos li { counter-increment: paso; display: grid; gap: .45rem; justify-items: center; text-align: center; padding: 1.8rem 1.2rem; border-radius: 16px; border: 1px solid #2c3547; background: #151b28; position: relative; }
.tres-pasos li::before { content: counter(paso); position: absolute; top: .8rem; left: 1rem; font-family: var(--f-marca); font-size: 1.6rem; color: rgba(224,162,58,.45); }
.tres-pasos b { font-size: 1.1rem; }
.tres-pasos li > span:last-child { color: #a3a9b6; font-size: .92rem; }
.reparto-franja { padding: 1rem 0 3rem !important; border-top: 0 !important; }
.reparto-franja .reparto { grid-template-columns: repeat(8, 1fr); }
.ejemplos-v3 .ejemplo { grid-column: span 4; }
@media (max-width: 960px) { .posibilidades { grid-template-columns: 1fr 1fr; } .audiencia { grid-template-columns: 1fr; gap: 1.5rem; } .audiencia.invertida figure { order: 0; } .reparto-franja .reparto { grid-template-columns: repeat(4, 1fr); } .ejemplos-v3 .ejemplo { grid-column: span 6; } }
@media (max-width: 640px) { .posibilidades, .tres-pasos { grid-template-columns: 1fr; } .ejemplos-v3 .ejemplo { grid-column: 1 / -1; } .franja { grid-auto-columns: 80%; } }
.ejemplos-v3 .ejemplo-imagen { border-bottom: 1px solid #2c3547; }
.ejemplos-v3 .ejemplo-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ejemplos-v3 .ejemplo:hover .ejemplo-imagen img { transform: scale(1.04); }
.ejemplos-v3 .ejemplo-texto h3 { font-size: 1.15rem; }
.audiencia figure { overflow: hidden; border-radius: 14px; border: 1px solid #2c3547; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.audiencia figure img { border: 0; border-radius: 0; box-shadow: none; margin-top: -4.2%; } /* sin la barra superior de la aplicación */

/* v1.13: tiempo estimado en el resumen del asistente */
.tiempo-estimado { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--fondo-suave, rgba(0,0,0,.04)); font-size: .95rem; }
.tiempo-estimado .pestana-icono { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }

/* v1.14: Administración › Costes */
.costes-migas { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: 1rem; }
.costes-buscar input { width: 100%; max-width: 380px; margin-bottom: 1rem; }
.costes-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1.2rem; }
.coste-tarjeta { display: grid; gap: .15rem; padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); }
.coste-tarjeta strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.coste-tarjeta.bien strong { color: var(--ok); }
.coste-tarjeta.mal strong { color: var(--error); }
.tabla-costes tr.clicable { cursor: pointer; }
.tabla-costes tr.clicable:hover td, .tabla-costes tr.clicable:focus-visible td { background: var(--superficie-2); }
.costes-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.costes-dos h3 { margin: 0 0 .5rem; font-size: 1rem; }
.costes-ajustes { margin-top: 1.4rem; }
.costes-ajustes summary { cursor: pointer; color: var(--tinta-2); }

/* v1.27: Mi cuenta y conectores de publicación */
a.quien { color: #a3a9b6; text-decoration: none; }
a.quien:hover, a.quien:focus-visible { color: inherit; text-decoration: underline; }
.mi-cuenta { max-width: 760px; margin: 0 auto; display: grid; gap: 1.2rem; }
.datos-cuenta { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.datos-cuenta dt { color: #6b7280; }
.datos-cuenta dd { margin: 0; overflow-wrap: anywhere; }
.plataforma-cuenta { border: 1px solid #e5e2da; border-radius: 12px; padding: 1rem 1.1rem; display: grid; gap: .6rem; margin-top: .8rem; }
.plataforma-cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.plataforma-cab .etiqueta { font-size: .78rem; padding: .15rem .55rem; border-radius: 999px; background: #f1efe9; color: #6b7280; }
.plataforma-cab .etiqueta.ok { background: #e3f3e8; color: #1f7a45; }
.plataforma-cuenta .formulario { display: grid; gap: .5rem; }
.plataforma-cuenta .formulario label { display: grid; gap: .25rem; }
.plataforma-cuenta .acciones { display: flex; gap: .6rem; flex-wrap: wrap; }

/* v1.32: opción de exportar sin el logo de Ludificator */
.panel-sin-logo { padding-block: .8rem; }
.panel-publicar .panel-sin-logo, .panel-plataformas .panel-sin-logo { box-shadow: none; border: 1px dashed #e0dccf; margin: .4rem 0; }
/* v1.36: Mi cuenta › Equipo y el autor de los cursos del equipo en Mis cursos. */
.equipo-cab { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.equipo-nombre { font-size: 1.15rem; }
.equipo-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: .4rem 0 .6rem; }
.equipo-form label { display: grid; gap: .25rem; }
.equipo-tabla td { vertical-align: middle; }
.equipo-email { display: block; font-size: .85rem; }
.equipo-sub { margin: 1.2rem 0 .2rem; font-size: 1rem; }
.equipo-copiar { display: flex; gap: .5rem; }
.equipo-enlace { flex: 1; min-width: 0; font-size: .85rem; }
.equipo-peligro { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid #e5e2da; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.equipo-invitacion { border: 1px solid #e5e2da; border-left: 4px solid var(--acento, #c78a2c); border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1rem; }
.equipo-invitacion .acciones { display: flex; gap: .6rem; }
.autor-curso { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: #6b7280; }
.autor-curso svg { width: 14px; height: 14px; }
/* v1.37: imagen de marca de la organización. */
.marca-actual, .marca-fila { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.marca-actual .paleta-muestra, .marca-fila .paleta-muestra { width: 2.2rem; height: 2.2rem; border-radius: 8px; flex: none; display: inline-block; }
.marca-actual .logo-vista, .marca-fila .logo-vista { max-height: 2.4rem; max-width: 7rem; object-fit: contain; }
.marca-fila .interruptor { flex: 1; min-width: 14rem; }
.equipo-marca .interruptor { margin: .5rem 0; }
/* v1.38: narrativas y plantillas del equipo */
.narrativas-equipo { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.narrativas-equipo li { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--borde, #e3e5ea); border-radius: 10px; }
.narrativas-equipo li .sutil { display: block; font-size: .85rem; }
.narrativa-icono { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 8px; background: var(--fondo-suave, #f3f4f7); }
.narrativa-form { display: grid; gap: .6rem; margin-top: .4rem; }
.narrativa-form textarea { width: 100%; }
.etiqueta-plantilla { display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: #e7f3ec; color: #1d6b43; margin-top: .2rem; }
@media (max-width: 720px) { .narrativas-equipo li { grid-template-columns: auto 1fr; } .narrativas-equipo li .acciones { grid-column: 1 / -1; } }
.zona-plantillas > .sutil { margin: 0 0 1rem; }
.narrativa-form label { display: grid; gap: .25rem; } .narrativa-form select { max-width: 320px; }
.banda-equipo { margin-top: .5rem; display: grid; gap: .4rem; } .banda-equipo .aviso { margin: 0; } /* v1.39 */
.equipo-tabla select, .equipo-tabla input.limite-mes { font: inherit; padding: .25rem .4rem; border: 1px solid var(--borde, #d9dce3); border-radius: 6px; background: #fff; }
.equipo-tabla input.limite-mes { width: 6.5rem; }
.equipo-tabla .gastado { display: block; font-size: .78rem; }
.banda-equipo .aviso { background: #fff6e0; border: 1px solid #f0d58a; color: #6b4a00; font-size: .92rem; }
/* v1.40: revisión antes de publicar */
.revision-cab { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 .8rem; }
.revision-nota { flex-basis: 100%; margin: 0; font-style: italic; color: var(--tinta-2); }
.chip-revision { display: inline-block; padding: .2rem .7rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: #eceef2; color: #3b4150; }
.chip-revision.cr-revision { background: #fff1d6; color: #7a5200; }
.chip-revision.cr-aprobado { background: #e2f4ea; color: #1d6b43; }
.chip-revision.cr-cambios, .chip-revision.cr-cambiado { background: #fde8e6; color: #9b2c22; }
.revision-form { display: grid; gap: .6rem; }
.revision-form textarea, .comentario-form textarea { width: 100%; }
.revision-acciones { display: flex; flex-wrap: wrap; gap: .6rem; }
.revision-general { margin: .6rem 0 1rem; }
.revision-cap { border: 1px solid var(--borde, #e3e5ea); border-radius: 10px; margin: .5rem 0; background: #fff; }
.revision-cap > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; display: flex; gap: .5rem; align-items: center; }
.revision-bloques { list-style: none; margin: 0; padding: 0 .9rem .6rem; }
.revision-bloques > li { padding: .6rem 0; border-top: 1px solid var(--borde, #eef0f3); display: grid; gap: .3rem; }
.bloque-ref { display: grid; gap: .1rem; }
.bloque-ref .eyebrow { margin: 0; }
.comentarios { list-style: none; margin: .2rem 0; padding: 0; display: grid; gap: .4rem; }
.comentario { background: #f6f7f9; border-radius: 8px; padding: .5rem .7rem; }
.comentario.resuelto { opacity: .6; }
.comentario p { margin: .2rem 0; white-space: pre-wrap; }
.comentario-cab { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.comentario-acc { display: flex; gap: .8rem; }
.comentario-form { display: grid; gap: .4rem; }
.hilo .comentar { justify-self: start; }
.equipo-revision { margin: .8rem 0; }
/* v1.41: informes */
.informes .volver { display: inline-block; margin-bottom: .4rem; }
.informe-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.informe-periodo { display: flex; gap: .5rem; align-items: center; }
.informe-periodo select { font: inherit; padding: .3rem .5rem; border: 1px solid var(--borde, #d9dce3); border-radius: 6px; background: #fff; }
.informe-total { font-size: 1.05rem; margin: .4rem 0 1rem; }
.informe-total b { font-size: 1.6rem; }
.informe-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.informes h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.barra-mini { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: #e6e8ec; vertical-align: middle; overflow: hidden; }
.barra-mini > span { display: block; height: 100%; background: var(--acento, #e2a63b); }
.equipo-informes { margin: .6rem 0; }
@media (max-width: 720px) { .informe-dos { grid-template-columns: 1fr; } }
/* v1.42: datos de facturación */
.fiscales-form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.fiscales-form label { display: grid; gap: .25rem; }
.fiscales-form .fiscal-razon, .fiscales-form .fiscal-direccion { grid-column: 1 / -1; }
@media (max-width: 720px) { .fiscales-form { grid-template-columns: 1fr; } }
#fac-zona h3 { margin: 1rem 0 .4rem; }
.pack-ahorro { margin: 0; font-size: .85rem; font-weight: 600; color: #1f7a52; }
.plataforma-cuenta .campo-num { margin: .2rem 0 .8rem; } .plataforma-cuenta .campo-num input { max-width: 12rem; }
/* v1.52: subpestañas de administración y galería de fondos */
.admin-pestanas + .admin-subpestanas { margin-top: -8px; }
.admin-subpestanas { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.admin-subpestanas[hidden] { display: none; }
.admin-subpestanas button { appearance: none; font: inherit; font-size: .9rem; font-weight: 500; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--borde, rgba(127,127,127,.3)); background: transparent; color: inherit; cursor: pointer; }
.admin-subpestanas button[hidden] { display: none; }
.admin-subpestanas button:hover { border-color: var(--acento, #e0a23a); }
.admin-subpestanas button[aria-selected="true"] { background: var(--acento, #e0a23a); border-color: var(--acento, #e0a23a); color: #1d2433; font-weight: 600; }
.admin-subpestanas button:focus-visible { outline: 2px solid var(--acento, #e0a23a); outline-offset: 2px; }
.fon-rejilla { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.fon-img { aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--acento) 8%, transparent); }
.fon-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fon-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.fon-boton { padding: .3rem .7rem; font-size: .8rem; }
.fon-lugares { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .3rem; }
.fon-lugar { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; margin: 0; }
.fon-lugar input { width: auto; }
.fondos-galeria .fondo-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v1.52: selector de apariencia con vista grande, filtros y miniaturas */
.selector-skin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; align-items: start; }
.selector-skin .vista-skin { margin: 0; position: sticky; top: 1rem; }
.vista-skin-marco { position: relative; }
.vista-skin-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); background: #1d2433; }
.vista-skin-flecha { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); color: #1d2433; box-shadow: 0 2px 10px rgba(0,0,0,.25); opacity: .85; transition: opacity .2s, scale .2s; }
.vista-skin-flecha svg { width: 20px; height: 20px; }
.vista-skin-flecha:hover, .vista-skin-flecha:focus-visible { opacity: 1; scale: 1.06; }
.vista-skin-flecha.ant { left: 10px; } .vista-skin-flecha.sig { right: 10px; }
.vista-skin-pie { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-top: .7rem; }
.vista-skin-pie strong { display: block; font-size: 1.05rem; }
.vista-skin-pie .sutil { display: block; font-size: .88rem; }
.vista-skin-partes { display: inline-flex; border: 1px solid var(--borde); border-radius: 99px; padding: 3px; gap: 2px; flex: none; }
.vista-skin-partes button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-size: .82rem; padding: .3rem .75rem; border-radius: 99px; cursor: pointer; }
.vista-skin-partes button[aria-pressed="true"] { background: var(--acento, #e0a23a); color: #1d2433; font-weight: 600; }
.skin-filtros { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.skin-filtro { appearance: none; font: inherit; font-size: .85rem; padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--borde); background: transparent; color: inherit; cursor: pointer; }
.skin-filtro small { opacity: .6; }
.skin-filtro.activo { border-color: var(--acento, #e0a23a); background: color-mix(in srgb, var(--acento, #e0a23a) 16%, transparent); font-weight: 600; }
.skin-miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; max-height: 520px; overflow-y: auto; padding: 3px; }
.skin-mini { appearance: none; border: 2px solid transparent; border-radius: 10px; padding: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; display: grid; gap: .3rem; }
.skin-mini:hover { border-color: var(--borde); }
.skin-mini.elegida { border-color: var(--acento, #e0a23a); background: color-mix(in srgb, var(--acento, #e0a23a) 10%, transparent); }
.skin-mini:focus-visible { outline: 2px solid var(--acento, #e0a23a); outline-offset: 2px; }
.skin-mini-nombre { font-size: .82rem; font-weight: 600; padding: 0 2px; }
@media (max-width: 860px) { .selector-skin { grid-template-columns: 1fr; } .selector-skin .vista-skin { position: static; } .skin-miniaturas { max-height: none; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } }
/* v1.53: selector de idioma */
.idioma-ui { display: inline-flex; align-items: center; gap: .3rem; position: relative; color: inherit; opacity: .85; margin: 0; font-weight: 400; font-size: .85rem; }
.idioma-ui:hover { opacity: 1; }
.idioma-ui svg { width: 18px; height: 18px; flex: none; }
.idioma-ui select { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid transparent; color: inherit; font: inherit; padding: .2rem .3rem; border-radius: 6px; cursor: pointer; width: auto; }
.idioma-ui select:hover, .idioma-ui select:focus-visible { border-color: currentColor; }
.idioma-ui select option { color: #1d2433; background: #fff; }
.idioma-esquina { position: fixed; top: 12px; right: 16px; z-index: 5; }
:lang(zh) body, :lang(zh) input, :lang(zh) button, :lang(zh) select, :lang(zh) textarea { font-family: "Instrument Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
:lang(ja) body, :lang(ja) input, :lang(ja) button, :lang(ja) select, :lang(ja) textarea { font-family: "Instrument Sans", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; }

/* v1.54: capturas del curso para la página de venta de Spaces */
.capturas-venta { display: grid; gap: .45rem; justify-items: start; margin-bottom: .6rem; }
.capturas-venta .sutil { margin: 0; }
.capturas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; width: 100%; }
.captura-venta { display: grid; gap: .35rem; border: 1px solid #e5e2da; border-radius: 10px; padding: .5rem; }
.captura-venta img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #f3f1ec; }
.captura-venta input { font: inherit; font-size: .85rem; border: 1px solid var(--linea, #ccc); border-radius: 6px; padding: .3rem .45rem; }
.captura-venta .acciones .boton-sec { font-size: .8rem; padding: .25rem .6rem; }
.captura-venta .acciones .boton-sec:disabled { opacity: .4; cursor: default; }

/* v1.55: escaparate de Spaces */
.escaparate-venta { display: grid; gap: .5rem; margin-bottom: .6rem; }
.escaparate-venta .escaparate-si { display: flex; gap: .5rem; align-items: center; font-weight: 600; justify-self: start; }
.escaparate-venta .escaparate-si input { width: auto; margin: 0; }
.escaparate-campos { display: flex; gap: .8rem; flex-wrap: wrap; }
.escaparate-campos label { display: grid; gap: .2rem; font-size: .8rem; color: var(--letra-2, #666); }
.escaparate-campos select { font: inherit; font-size: .95rem; color: var(--letra, inherit); border: 1px solid var(--linea, #ccc); border-radius: 6px; padding: .35rem .5rem; min-width: 13rem; }
.escaparate-venta .sutil:empty { display: none; }

/* v1.56: API de cursos en administración */
.apic-copia { display: flex; gap: .5rem; align-items: center; }
.apic-copia input { flex: 1; font-family: ui-monospace, monospace; font-size: .85rem; }
.apic-nueva { border: 2px solid var(--ok, #2f855a); border-radius: 12px; padding: 1rem 1.1rem; margin: .8rem 0; display: grid; gap: .6rem; background: #f3faf5; }
.apic-nueva h3 { margin: 0; }
.apic-titulo { margin: 1.4rem 0 .4rem; }
.apic-acciones { display: grid; gap: .3rem; min-width: 7.5rem; }
.apic-acciones .boton-sec { white-space: nowrap; }
.apic-acciones .boton-sec { font-size: .8rem; padding: .25rem .6rem; }
#p-api-cursos .tabla input[type=url] { min-width: 10rem; width: 100%; }
#p-api-cursos .tabla td { padding: .5rem .45rem; }
#p-api-cursos .tabla input[type=number] { width: 5rem; }
.apic-guia { margin-top: 1.4rem; }
.apic-codigo { background: #121826; color: #e8ecf3; padding: .8rem 1rem; border-radius: 8px; overflow-x: auto; font-size: .8rem; line-height: 1.45; }
.panel-skin .selector-skin .vista-skin { position: static; } /* v1.57: en el editor el panel es estrecho y se apila: fija, tapaba los filtros */

/* v1.57: asistente con cada elección resumida y «Cambiar» */
.plegable-cab { display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.plegable-texto { min-width: 0; flex: 1; }
.plegable-texto h2 { margin: 0 0 .5rem; }
.plegable-boton { flex: none; }
.plegable.abierto .plegable-cab { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--borde); }
.plegable-cuerpo > .panel { border: 0; padding: 0; margin: 0; box-shadow: none; background: none; }
.plegable-cuerpo > .panel > h2 { display: none; }
.plegable-cuerpo > .sutil:first-child { margin-top: 0; }
.resumen-eleccion { display: flex; gap: .9rem; align-items: center; min-width: 0; }
.resumen-eleccion > div { display: grid; gap: .15rem; min-width: 0; }
.resumen-eleccion strong { font-size: 1.02rem; }
.resumen-eleccion .sutil { font-size: .88rem; }
.resumen-eleccion.solo-texto strong { font-weight: 600; overflow-wrap: anywhere; }
.resumen-figura { display: flex; align-items: center; gap: .4rem; flex: none; }
.resumen-figura.pj { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--fondo-2, #f3f1ec); justify-content: center; }
.resumen-figura.pj svg, .resumen-figura.pj .ejemplo-estilo, .resumen-figura.pj img { width: 100%; height: 100%; object-fit: cover; }
.resumen-figura .muestra { display: flex; width: 54px; height: 30px; border-radius: 8px; overflow: hidden; }
.resumen-figura .muestra span { flex: 1; }
.resumen-figura .muestra.auto { align-items: center; justify-content: center; background: var(--fondo-2, #f3f1ec); font-weight: 700; font-size: .8rem; color: var(--tinta-2); }
.resumen-eleccion > .paleta-muestra { width: 54px; height: 40px; border-radius: 10px; flex: none; }
.resumen-skin { width: 110px; flex: none; border-radius: 8px; overflow: hidden; display: block; }
.resumen-skin img { width: 100%; display: block; }
.logo-vista.mini { max-height: 40px; max-width: 90px; }
@media (max-width: 560px) { .plegable-cab { align-items: flex-start; } .resumen-skin { width: 80px; } }

/* v1.58: barra superior homogénea */
.barra-izq { display: flex; align-items: center; gap: 1.3rem; min-width: 0; }
.barra-izq .ir-cursos { color: #ece6d8; text-decoration: none; font-size: .9rem; padding-left: 1.1rem; border-left: 1px solid rgba(255,255,255,.18); }
.barra-izq .ir-cursos:hover, .barra-izq .ir-cursos:focus-visible { color: #e0a23a; }
.barra-nav { gap: .8rem; }
.boton-redondo { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); color: #e9e3d6 !important;
  font-weight: 600; font-size: .92rem; line-height: 1; text-decoration: none !important; position: relative; flex: none; overflow: visible; }
.boton-redondo:hover, .boton-redondo:focus-visible, .boton-redondo.activo { border-color: #e0a23a; color: #e0a23a !important; }
.boton-ayuda.boton-redondo { width: 2rem; height: 2rem; }
.boton-admin { background: #e0a23a; border-color: #e0a23a; color: #121826 !important; }
.boton-admin svg { width: 1.15rem; height: 1.15rem; }
.boton-admin:hover, .boton-admin:focus-visible, .boton-admin.activo { background: #f0bf63; color: #121826 !important; box-shadow: 0 0 0 3px rgba(224,162,58,.35); }
.distintivo-admin { position: absolute; bottom: -.55rem; left: 50%; transform: translateX(-50%); background: #c0392b; color: #fff; font-size: .55rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .08rem .3rem; border-radius: 4px; line-height: 1.2; pointer-events: none; }
.avatar-usuario { background: #2a3245; color: #f4ede0 !important; font-size: .95rem; overflow: hidden; }
.avatar-usuario.con-foto { padding: 0; border-color: rgba(255,255,255,.4); }
.avatar-usuario img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.foto-perfil { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.foto-perfil .avatar-usuario { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; background: #1d2433; pointer-events: none; }
/* v1.59: idioma en píldora (globo + siglas) y Salir redondo */
.idioma-barra { height: 2rem; padding: 0 .65rem 0 .55rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; gap: .35rem; opacity: 1; color: #e9e3d6; cursor: pointer; flex: none; }
.idioma-barra:hover, .idioma-barra:focus-within { border-color: #e0a23a; color: #e0a23a; }
.idioma-barra svg { width: 1rem; height: 1rem; }
.idioma-siglas { font-weight: 600; font-size: .8rem; letter-spacing: .04em; line-height: 1; }
.idioma-barra select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.boton-salir { background: transparent; padding: 0; cursor: pointer; font: inherit; }
.boton-salir svg { width: 1.05rem; height: 1.05rem; }
@media (max-width: 640px) { .barra-izq { gap: .8rem; } .barra-izq .ir-cursos { padding-left: .8rem; } .barra-nav { gap: .6rem; } }

/* v1.62: Ringmaster */
.barra-izq .ir-ring, .barra-izq .ir-admin { padding-left: 0; border-left: 0; } /* v2.29: también Administración */
.barra-izq .ir-cursos.activo { color: #e0a23a; }
.ring { max-width: 1180px; }
.ring-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ring-cab h1 { margin: 0 0 .3rem; }
.ring-cab p { margin: 0; max-width: 46rem; }
.ring-mando { display: flex; align-items: center; gap: .8rem; }
.ring-boton { display: inline-flex; align-items: center; gap: .45rem; }
.ring-boton svg { width: 1.1rem; height: 1.1rem; }
.ring-chip-estado { padding: .3rem .8rem; border-radius: 99px; font-size: .85rem; font-weight: 600; background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--borde); }
.ring-chip-estado.marcha { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.ring-chip-estado.reposo, .ring-chip-estado.parando { background: color-mix(in srgb, var(--acento) 15%, transparent); color: var(--acento-fuerte); border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
.ring-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.ring-cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: .8rem 1rem; display: grid; gap: .1rem; }
.ring-cifra b { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.ring-cifra span { color: var(--tinta-2); font-size: .85rem; }
.ring-zona { padding: 1.6rem 1rem; }
.ring-zona svg { width: 2rem; height: 2rem; color: var(--acento); }
.ring-zona.encima { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--superficie-2)); }
.ring-zona input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ring-subidas { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ring-subidas li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 8rem minmax(0, 14rem); align-items: center; gap: .6rem; font-size: .9rem; }
.ring-subidas li svg { width: 1.1rem; height: 1.1rem; color: var(--tinta-2); }
.ring-subida-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring-subidas li.ok .sutil { color: var(--ok); }
.ring-subidas li.mal .sutil { color: var(--error); }
.ring-subidas progress { width: 100%; height: .5rem; }
.ring-pestanas { display: flex; background: none; border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; padding: 0; margin-bottom: 1rem; }
.ring-pestanas .pestana[aria-selected="true"] { background: none; box-shadow: none; }
.ring-lista-cab:has(#ring-lista-acciones:empty) { display: none; }
.ring-lista-cab { justify-content: flex-end; }
.ring-mitades { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ring-mitades[hidden] { display: none; }
.ring-mitades > .panel { margin: 0; }
.ring-mitades h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.ring-subir { position: sticky; top: 1rem; }
.ring-subir .ring-subidas li { grid-template-columns: 1.2rem minmax(0, 1fr) 5rem; }
.ring-subir .ring-subidas li > .sutil { grid-column: 2 / -1; }
.ring-ajustes-resumen { margin: 0 0 .8rem; font-size: .9rem; }
@media (max-width: 900px) { .ring-mitades { grid-template-columns: minmax(0, 1fr); } .ring-subir { position: static; } }
.ring-envio progress { width: 100%; margin: .4rem 0; }
.ring-envio .acciones input { flex: 1 1 14rem; min-width: 0; }
.ring-migrar-fallos { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: var(--tinta-2); }
.ring-ajustes h3 { font-size: 1rem; margin: 1.3rem 0 .6rem; }
.ring-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem 1rem; margin-bottom: .8rem; }
.ring-campo { display: grid; gap: .25rem; margin: 0; }
.ring-campo > span { font-size: .85rem; font-weight: 600; }
.ring-campo textarea { width: 100%; }
.ring-casillas { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: .8rem; }
.ring-casilla { display: inline-flex; align-items: flex-start; gap: .4rem; margin: 0; cursor: pointer; font-weight: 400; }
.ring-casilla span { display: grid; }
.ring-casilla.apagada { opacity: .6; cursor: default; }
.ring-varios { margin-bottom: 1rem; }
.ring-varios-cab { display: flex; gap: 1rem; align-items: baseline; }
.ring-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ring-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border: 1px solid var(--borde); border-radius: 99px; font-size: .85rem; cursor: pointer; margin: 0; font-weight: 400; background: var(--superficie); }
.ring-chip:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, var(--superficie)); }
.ring-venta { padding: .8rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); align-items: end; }
.ring-lista-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.ring-lista-cab h2 { margin: 0 0 .5rem; }
.ring-vacia { padding: 1rem 0; }
.ring-tabla td { vertical-align: top; }
.ring-tabla td .sutil, .ring-tabla td .ring-mal { font-size: .72rem; line-height: 1.3; margin-top: .15rem; } /* v2.57: la información secundaria, pequeña */
.ring-asa { white-space: nowrap; color: var(--tinta-2); }
.ring-asa svg { width: 1rem; height: 1rem; vertical-align: -3px; cursor: grab; margin-right: .2rem; }
.ring-nombre { display: flex; gap: .4rem; align-items: center; }
.ring-nombre svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--tinta-2); }
.ring-nombre strong { overflow-wrap: anywhere; }
.ring-estado { display: inline-block; padding: .12rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--superficie-2); border: 1px solid var(--borde); white-space: nowrap; }
.ring-estado.transcribiendo, .ring-estado.generando, .ring-estado.publicando { color: var(--acento-fuerte); border-color: var(--acento); }
.ring-estado.hecha { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.ring-estado.error { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }
.ring-mal { color: var(--error); font-size: .85rem; }
.ring-tabla tr.ring-transcribiendo, .ring-tabla tr.ring-generando, .ring-tabla tr.ring-publicando { background: color-mix(in srgb, var(--acento) 6%, transparent); }
.ring-tabla tr.moviendo { opacity: .4; }
.ring-tabla tr.destino td { border-top: 2px solid var(--acento); }
.ring-tabla td a + a { margin-left: .6rem; }
.boton-cancelar-creacion { align-self: flex-start; } /* v2.57 */
.ring-acciones { white-space: nowrap; text-align: right; }
.ring-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--tinta-2); cursor: pointer; padding: 0; }
.ring-ico:hover:not(:disabled), .ring-ico:focus-visible { border-color: var(--borde); color: var(--tinta); }
.ring-ico:disabled { opacity: .3; cursor: default; }
.ring-ico svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .ring-subidas li { grid-template-columns: 1.2rem minmax(0, 1fr) 5rem; } .ring-subidas li .sutil { grid-column: 2 / -1; } }
.ring-chip input, .ring-casilla input { width: auto; flex: none; margin: .15rem 0 0; }
.ring-chip input { margin: 0; }
.ring-tabla { min-width: 780px; }
.ring-rejilla { align-items: start; }
.ring-campo select, .ring-campo input { width: 100%; }

/* v1.65: editor de la tabla (una línea por fila, celdas con «|»). */
.ix-ed .tabla-ed { min-height: 5.5em; border: 1px dashed rgba(236,230,216,.3); font-family: var(--f-ui); font-size: .9rem; line-height: 1.6; white-space: pre; overflow-x: auto; }
.ix-ed label.interruptor { color: inherit; margin: .2rem 0 0; font-size: .85rem; }
.panel-integra .elecciones { margin-bottom: .6rem; }

/* v1.67: número de pantalla en cada bloque e «Ir a la pantalla» */
.bloque-barra .num-ed { font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--letra-ed-2); background: rgba(127,127,127,.12); border-radius: 999px; padding: .1rem .5rem; }
.ir-pantalla { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.ir-pantalla label { font-size: .85rem; font-weight: 600; }
.ir-pantalla .ir-pantalla-num { width: 5rem; }
.bloque-ed.resaltado { animation: resalta-bloque 2.4s ease; }
@keyframes resalta-bloque { 0%, 60% { box-shadow: 0 0 0 3px #e0a23a; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* v1.69: vídeo con IA en la pizarra */
.video-ia { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .6rem; }
.video-ia .pz-video-ed { width: 100%; max-width: 420px; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; }
.video-ia .video-espera { flex-basis: 100%; }

/* v1.71: escena animada con IA en la pizarra */
.anim-ia .anim-ed { width: 100%; max-width: 420px; }

/* v1.72: modo depuración, discreto en una esquina */
.depu { position: fixed; left: 8px; bottom: 8px; z-index: 2147483000; font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #6b7280; max-width: min(760px, calc(100vw - 16px)); }
.depu-boton { font: inherit; color: #fff; background: #374151; border: 0; border-radius: 6px; padding: 3px 9px; cursor: pointer; opacity: .85; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.depu-boton:hover { opacity: 1; }
.depu-cuerpo { display: none; margin-top: 4px; max-height: 42vh; overflow: auto; background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.1); border-radius: 8px; padding: 6px 8px; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.depu.abierto .depu-cuerpo { display: block; }
.depu-fila { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 3px 0; border-bottom: 1px dashed rgba(0,0,0,.08); }
.depu-fila.en-curso { color: #9a6b00; }
.depu-fila.mal { color: #b42318; }
.depu-destino { opacity: .6; }
.depu-enc { padding: 3px 0; color: #374151; border-bottom: 1px solid rgba(0,0,0,.08); }
.pieza-error.reintento { color: #9a6b00; font-size: .85em; }

/* v1.75: velocidad al crear un curso */
.velocidad-tit { margin: .2rem 0 .5rem; font-size: 1rem; }
.velocidades { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.velocidad { display: grid; gap: .25rem; justify-items: start; text-align: left; padding: .8rem .9rem; border: 1px solid var(--linea, #d9dce3); border-radius: 12px; background: var(--panel, #fff); color: inherit; font: inherit; cursor: pointer; }
.velocidad svg { width: 22px; height: 22px; }
.velocidad.elegida { border-color: var(--ambar, #e0a23a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ambar, #e0a23a) 45%, transparent); }
.velocidad .sutil { font-size: .85rem; line-height: 1.35; }

/* v1.83: Exportar › Descargar, con lo principal en dos tarjetas grandes. */
.descargas-principales { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .6rem; }
.descarga-principal { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie-2); }
.descarga-principal .dp-icono { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--borde); color: var(--acento); }
.descarga-principal .dp-icono svg { width: 1.8rem; height: 1.8rem; }
.descarga-principal h3 { margin: .1rem 0 .35rem; font-size: 1.15rem; }
.descarga-principal .acciones { margin-top: .8rem; gap: .5rem; }
.descarga-principal .dp-pie { margin: .6rem 0 0; font-size: .85rem; }
.dp-mas { margin: 1rem 0 0; }

/* v1.86: Mis cursos: lo principal a la derecha (Curso en blanco, Nuevo curso); cargar, unir y separar, discretos. */
.acciones-lista { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; justify-content: flex-end; }
.acciones-principales { display: flex; gap: .5rem; flex-wrap: wrap; }
.acciones-discretas { display: flex; gap: .1rem; flex-wrap: wrap; }
.boton-discreto { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .4rem .55rem; border-radius: var(--radio); color: var(--tinta-2); font: inherit; font-size: .88rem; cursor: pointer; }
.boton-discreto:hover { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.boton-discreto:disabled { opacity: .6; cursor: default; }
.boton-discreto .pestana-icono, .boton-icono-texto .pestana-icono { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boton-icono-texto { gap: .45rem; }
/* Separar un curso */
.separar-elegir { width: 100%; background: none; text-align: left; font: inherit; color: inherit; }
.separar-elegir:hover { border-color: var(--acento, #e0a23a); }
.separar-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.separar-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; max-height: 26rem; overflow: auto; padding-right: .25rem; }
.separar-cap { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: .6rem; }
.separar-corte button { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: 1px dashed transparent; border-radius: .5rem; padding: .15rem .6rem; color: var(--tinta-2); font: inherit; font-size: .8rem; cursor: pointer; }
.separar-corte button:hover { border-color: var(--borde); color: var(--tinta); }
.separar-corte .pestana-icono { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.separar-corte.activo button { margin: .35rem 0; border: 1px dashed var(--acento, #e0a23a); background: color-mix(in srgb, var(--acento, #e0a23a) 10%, transparent); color: var(--tinta); font-weight: 600; }
.separar-titulos { display: grid; gap: .6rem; margin-bottom: .6rem; }
.separar-titulos .campo span { font-size: .85rem; font-weight: 600; }
.separar-titulos input { width: 100%; }
@media (max-width: 720px) { .acciones-lista { justify-content: flex-start; } }

/* v1.87: Bloque a bloque: un bloque por pantalla, la vista previa al lado y la tira de bloques abajo. */
.editor-bloques { grid-template-rows: auto 1fr auto; }
.editor-bloques .ec-cab .pb-cap { flex: 1; min-width: 10rem; max-width: 34rem; font-weight: 600; }
.editor-bloques .ec-estado { margin-right: auto; }
.pb-cuerpo { display: grid; grid-template-columns: minmax(360px, 44%) minmax(0, 1fr); min-height: 0; }
.pb-cuerpo.sin-previa { grid-template-columns: minmax(0, 1fr); }
.pb-editor { min-height: 0; overflow-y: auto; }
.pb-zona { max-width: 860px; margin: 0 auto; padding: 1.3rem clamp(1rem, 3vw, 2.4rem) 3rem; }
.pb-cab-bloque { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.pb-cab-bloque .eyebrow { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-donde { flex: none; font-size: .85rem; font-weight: 600; color: var(--tinta-2); }
.pb-zona .bloque-ed { margin: 0; }
.pb-anadir { margin-top: .4rem; }
.pb-previa { display: grid; grid-template-rows: auto 1fr; min-height: 0; border-right: 1px solid var(--borde); background: var(--superficie); }
.pb-previa[hidden] { display: none; }
.pb-previa-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--borde); font-size: .88rem; }
.pb-marco { width: 100%; height: 100%; border: 0; background: #000; }
.pb-pie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .55rem 1rem; background: var(--superficie); border-top: 1px solid var(--borde); }
.pb-ir { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; white-space: nowrap; }
.pb-ir:disabled { opacity: .45; cursor: default; }
.pb-cuenta { font-size: .85rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-tira-caja { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.pb-tira { list-style: none; margin: 0; padding: .2rem .1rem; display: flex; gap: .4rem; width: max-content; }
.pb-mini { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .4rem; align-items: center; width: 9.5rem; height: 3.4rem; padding: .35rem .5rem; text-align: left; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); color: var(--tinta); font: inherit; cursor: pointer; overflow: hidden; }
.pb-mini:hover { border-color: var(--tinta-2); }
.pb-mini.activo { border-color: var(--acento-fuerte); background: color-mix(in srgb, var(--acento-fuerte) 16%, var(--superficie)); box-shadow: inset 0 0 0 1px var(--acento-fuerte); }
.pb-mini-n { grid-row: 1 / 3; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--superficie-2); font-size: .75rem; font-weight: 700; }
.pb-mini.activo .pb-mini-n { background: var(--acento); color: var(--sobre-acento); }
.pb-mini-tipo { font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-mini.es-reto .pb-mini-tipo { color: var(--acento); }
.pb-mini-txt { font-size: .76rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .pb-pie { grid-template-columns: auto auto; grid-template-areas: "tira tira" "antes despues"; padding: .45rem .6rem; }
  .pb-tira-caja { grid-area: tira; }
  .pb-cuenta { display: none; }
  .pb-pie .pb-ir:first-child { grid-area: antes; }
  .pb-pie .pb-ir:last-child { grid-area: despues; justify-self: end; }
  .pb-mini { width: 7.5rem; height: 3rem; }
  .pb-zona { padding: .9rem .6rem 2rem; }
  .editor-bloques .ec-cab .pb-cap { min-width: 0; max-width: none; }
}
/* v1.88: Recreo */
.ps-recreo { background: linear-gradient(#6dd3ff, #c4f0ff 80%); color: #2b2a6b; }
.ps-recreo .ps-d-sol { left: -10px; top: -10px; width: 40px; height: 40px; border-radius: 50%; background: #ffd93d; border: 3px solid #2b2a6b; box-shadow: 0 0 0 5px rgba(255,217,61,.45); }
.ps-recreo .ps-d-nube { right: 120px; top: 12px; width: 30px; height: 11px; border-radius: 10px; background: #fff; border: 2px solid #2b2a6b; }
.ps-recreo .ps-d-suelo { left: 0; right: 0; bottom: 0; height: 13px; background: #5cd05a; border-top: 3px solid #2b2a6b; z-index: 1; }
.ps-recreo .ps-texto { bottom: 22px; }
.ps-recreo .ps-marca { background: #ff5d73; color: #fff; padding: 1px 7px; border-radius: 999px; border: 2px solid #2b2a6b; font: 800 8px/1.4 "Baloo 2", system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.ps-recreo .ps-titulo { font: 800 21px/1 "Baloo 2", system-ui, sans-serif; color: #fff; -webkit-text-stroke: 1px #2b2a6b; paint-order: stroke fill; text-shadow: 0 2px 0 #2b2a6b; }
.en-lista .ps-recreo .ps-d-sol { width: 22px; height: 22px; left: -6px; top: -6px; }
.en-lista .ps-recreo .ps-letra { font: 800 22px/1 "Baloo 2", sans-serif; color: #fff; -webkit-text-stroke: 1px #2b2a6b; paint-order: stroke fill; }
.narr-grupo { margin: 1.4rem 0 .5rem; font-size: 1.05rem; } .narr-grupo:first-child { margin-top: 0; } /* v1.90: narrativas por tipo en el panel */

/* v1.91: medios de la pizarra, un botón con icono para cada cosa */
.pz-medios-ed { display: grid; gap: .6rem; margin-top: .4rem; }
.medio-actual { display: grid; gap: .6rem; }
.medio-tiene { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.medio-titulo { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); }
.medio-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.medio-boton { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: .7rem .4rem .6rem; min-height: 88px; border: 1.5px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.medio-boton:hover:not(:disabled) { border-color: var(--tinta-2); }
.medio-boton.abierto { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 9%, var(--superficie)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); }
.medio-boton:disabled { opacity: .45; cursor: not-allowed; }
.medio-icono { width: 30px; height: 30px; fill: none; stroke: var(--acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.medio-panel { display: grid; gap: .5rem; padding: .85rem; border: 1.5px solid var(--acento); border-radius: 12px; background: color-mix(in srgb, var(--acento) 5%, var(--superficie)); }
.medio-panel h4 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: .95rem; }
.medio-panel p { margin: 0; }
.medio-campo { display: grid; gap: .2rem; font-size: .88rem; } /* v2.59: concepto y duración del vídeo conceptual */
.medio-campo > span { color: var(--tinta-2); }
.medio-campo select { justify-self: start; }
.medio-casilla { display: flex; gap: .45rem; align-items: center; font-size: .88rem; cursor: pointer; } /* v2.63: integrar el personaje en el vídeo */
.medio-casilla input { width: auto; flex: none; margin: 0; }
.cv-capturas { display: flex; flex-wrap: wrap; gap: .4rem; } /* v2.64: capturas de pantalla para el vídeo conceptual */
.cv-captura { position: relative; }
.cv-captura img { width: 84px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde, #d7dbe3); display: block; }
.cv-quitar { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #1f2633; color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; padding: 0; }
.cv-capturas:empty { display: none; }
.medio-campo .boton-sec { justify-self: start; }
.medio-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.medio-estado { margin: 0; padding: .6rem .8rem; border-radius: 10px; background: color-mix(in srgb, var(--acento) 10%, var(--superficie)); font-size: .88rem; font-weight: 600; }
.medio-estado.esperando::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -.05em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: medio-gira 1s linear infinite; }
@keyframes medio-gira { to { transform: rotate(360deg); } }
.pz-enlace { display: grid; gap: .3rem; }

/* v1.91: pedidos a Conceptual Vid en el panel */
.convid-pedidos { margin-top: 1.2rem; display: grid; gap: .6rem; }
.convid-pedidos h4 { margin: 0; }
.convid-traza { padding: .8rem 1rem; border-radius: 10px; background: var(--superficie-2, rgba(0,0,0,.04)); font-size: .88rem; }
.convid-traza ol { margin: .4rem 0 0; padding-left: 1.2rem; word-break: break-all; }

/* v1.92: un solo botón «Editar» y un editor a pantalla completa con tres modos (barra de arriba). */
.boton-editar { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.15rem; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent); }
.boton-editar .pestana-icono { width: 18px; height: 18px; }
.previa-barra .boton-editar { margin-left: auto; }
.cabecera-panel .acciones .boton-editar { margin-right: .2rem; }
.ed-modos { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie-2); }
.ed-modo { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--tinta-2); border-radius: 999px; padding: .38rem .85rem; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ed-modo:hover { color: var(--tinta); background: var(--superficie); }
.ed-modo.activo { background: var(--acento); color: var(--sobre-acento); cursor: default; }
.ec-cab .ec-estado { margin-left: auto; }
.editor-bloques .ec-estado { margin-right: 0; }
.editor-bloques .ec-cab .pb-cap { flex: 0 1 26rem; }
.editor-bloques .ec-cab .boton-sec[aria-pressed="true"] { background: var(--acento-suave); color: var(--acento-fuerte); border-color: transparent; }
.ecap-cuerpo { overflow-y: auto; min-height: 0; padding: 1.1rem clamp(.8rem, 2vw, 1.8rem) 3rem; }
.ecap-cuerpo .editor-visual { max-width: 1500px; margin: 0 auto; }
.ecap-cuerpo .editor-lateral { position: sticky; top: 0; align-self: start; max-height: calc(100vh - 90px); overflow-y: auto; }
.ecap-cuerpo .editor-previa { top: 0; height: calc(100vh - 100px); }
@media (max-width: 1180px) { .ed-modo span { display: none; } .ed-modo { padding: .42rem .6rem; } }
@media (max-width: 760px) { .ec-cab .ed-modo span { display: none; } .ecap-cuerpo { padding: .8rem .5rem 2rem; } }
@media (max-width: 760px) {
  .editor-bloques .ec-cab .pb-cap { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; order: 5; }
  .previa-barra { flex-wrap: wrap; }
  .previa-barra .capitulos-movil { min-width: 0; }
  .previa-barra .boton-editar { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 860px) {
  .ecap-cuerpo { overflow-x: hidden; }
  .ecap-cuerpo .editor-visual { grid-template-columns: minmax(0, 1fr); }
  .previa-barra .capitulos-movil { flex: 1 1 0; width: auto; }
}
/* v1.92: Contenido › Música y efectos */
.panel-musica .musica-propia { margin-top: 0; padding-top: 0; border-top: 0; }
.panel-musica .musica-propia h2 { margin: 0; }
.objetivos-ed { margin: .4rem 0 .8rem; }
.objetivos-ed li input { flex: 1; min-width: 0; }
.objetivos-ed li .acciones { display: flex; gap: .2rem; flex: none; width: 6.4rem; justify-content: flex-end; }
/* v1.93: Diseño sin vista previa al lado. Formato con una captura de ejemplo; Apariencia con la elección a la izquierda y la captura a la derecha. */
.formato-op { align-content: start; }
.formato-captura { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 8px; margin-bottom: .55rem; background: #1d2433; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.formato-elegir { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.panel-skin .selector-skin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.panel-skin .selector-skin .skin-lista { order: 1; }
.panel-skin .selector-skin .vista-skin { order: 2; position: sticky; top: 1rem; }
@media (max-width: 860px) {
  .panel-skin .selector-skin { grid-template-columns: 1fr; }
  .panel-skin .selector-skin .vista-skin { order: 0; position: static; }
}
.subpestanas .pestana { padding: .5rem .5rem; font-size: .9rem; } /* v1.93: caben las siete de Contenido */
/* v1.94: selector de componentes compacto, con buscador, grupos, icono de cada componente y su captura. */
.sb-fondo { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(18, 16, 14, .45); }
.selector-bloques { width: min(880px, 100%); height: min(560px, calc(100vh - 32px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.3); overflow: hidden; }
.sb-cab { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem .5rem 1rem; }
.sb-cab strong { font-size: 1rem; white-space: nowrap; }
.sb-buscar { flex: 1; min-width: 0; margin: 0; padding: .45rem .7rem; border-radius: 8px; }
.sb-grupos { display: flex; gap: .3rem; flex-wrap: wrap; padding: 0 1rem .6rem; border-bottom: 1px solid var(--borde); }
.sb-grupo { border: 1px solid var(--borde); background: transparent; color: var(--tinta-2); border-radius: 99px; padding: .25rem .75rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sb-grupo.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.sb-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 0; }
.sb-lista { overflow-y: auto; padding: .4rem .5rem 1rem; border-right: 1px solid var(--borde); display: grid; align-content: start; gap: 1px; }
.sb-titulo-grupo { margin: .6rem .5rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.sb-titulo-grupo:first-child { margin-top: .2rem; }
.sb-op { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: .6rem; width: 100%; text-align: left; border: 0; background: transparent; color: var(--tinta); border-radius: 8px; padding: .38rem .55rem; font: inherit; cursor: pointer; }
.sb-op .icono-tipo { width: 22px; height: 22px; color: var(--tinta-2); }
.sb-op:hover, .sb-op:focus-visible, .sb-op.activo { background: color-mix(in srgb, var(--acento) 12%, var(--superficie)); }
.sb-op.activo .icono-tipo, .sb-op:hover .icono-tipo { color: var(--acento); }
.sb-op-texto { display: grid; min-width: 0; }
.sb-op-nombre { font-size: .88rem; font-weight: 600; }
.sb-op-ayuda { font-size: .76rem; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-vista { display: grid; grid-template-rows: auto auto 1fr; gap: .7rem; padding: 1rem; align-content: start; background: var(--superficie-2); overflow-y: auto; }
.sb-marco { position: relative; aspect-ratio: 520 / 310; border-radius: 10px; overflow: hidden; background: #1d2433; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.sb-captura { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-icono-grande { position: absolute; inset: 0; display: grid; place-items: center; color: #e0a23a; }
.sb-icono-grande[hidden] { display: none; }
.sb-icono-grande .icono-tipo { width: 72px; height: 72px; stroke-width: 1.3; }
.sb-pie { display: grid; gap: .2rem; }
.sb-nombre { font-size: 1.05rem; }
.sb-ayuda { margin: 0; font-size: .88rem; color: var(--tinta-2); }
.sb-anadir { justify-self: start; align-self: end; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 700px) {
  .sb-fondo { padding: 8px; align-items: end; }
  .selector-bloques { height: min(640px, calc(100vh - 16px)); }
  .sb-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .sb-vista { order: -1; grid-template-columns: 120px 1fr; grid-template-rows: auto auto; padding: .6rem .8rem; gap: .3rem .7rem; }
  .sb-marco { grid-row: 1 / 3; }
  .sb-anadir { grid-column: 2; padding: .35rem .7rem; font-size: .85rem; }
  .sb-lista { border-right: 0; border-top: 1px solid var(--borde); }
  .sb-cab strong { display: none; }
}
/* Iconos de componente en el árbol del Editor cómodo y en la cinta de Bloque a bloque */
.ec-nodo.con-icono { grid-template-columns: 18px minmax(0, 1fr); column-gap: .45rem; }
.ec-nodo.con-icono .ec-tipo-ico { grid-row: 1 / 3; width: 18px; height: 18px; color: var(--tinta-2); margin-top: .1rem; }
.ec-nodo.con-icono.activo .ec-tipo-ico, .ec-reto .ec-tipo-ico { color: var(--acento); }
.pb-mini { position: relative; }
.pb-mini-ico { position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; color: var(--tinta-2); opacity: .8; }
.pb-mini.activo .pb-mini-ico, .pb-mini.es-reto .pb-mini-ico { color: var(--acento); opacity: 1; }
.pb-mini-tipo { padding-right: 14px; }
.pb-tira { gap: 0; }
.pb-entre { display: grid; place-items: center; width: .9rem; }
.pb-entre-boton { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--tinta-2); font-size: .8rem; line-height: 1; cursor: pointer; opacity: .35; transition: opacity .15s, border-color .15s; }
.pb-entre-boton:hover, .pb-entre-boton:focus-visible { opacity: 1; border-color: var(--acento); color: var(--acento); background: var(--superficie); }
/* Diálogo y narración: los botones de la imagen de apoyo, pequeños */
.medios-apoyo { gap: .35rem; }
.medios-apoyo .medio-titulo { font-size: .7rem; }
.medios-apoyo .medio-botones { display: flex; flex-wrap: wrap; gap: .35rem; }
.medios-apoyo .medio-boton { display: inline-flex; align-items: center; gap: .35rem; min-height: 0; padding: .3rem .6rem; border-radius: 8px; font-size: .8rem; }
.medios-apoyo .medio-boton .medio-icono { width: 16px; height: 16px; }
.medios-apoyo .pz-miniatura { max-height: 70px; }
@media (min-width: 761px) {
  .editor-bloques .ec-cab { flex-wrap: nowrap; }
  .editor-bloques .ec-cab .pb-cap { min-width: 0; flex: 1 1 18rem; }
  .editor-bloques .ec-cab > * { flex-shrink: 0; }
  .editor-bloques .ec-cab > .pb-cap { flex-shrink: 1; }
}
.ring-todas { display: inline-flex; gap: .8rem; }
.ring-aviso { display: block; margin-top: .3rem; color: var(--acento-fuerte, #b5761a); }
.ring-aviso[hidden] { display: none; }
/* v1.99: cómo se publica en Spaces (suelto, compuesto o dentro de otro curso) */
.spaces-modo { display: grid; gap: .55rem; margin: .4rem 0 .8rem; padding: .8rem; border: 1px solid var(--linea, #ddd); border-radius: 10px; }
.spaces-modo .spaces-modos { flex-wrap: wrap; justify-self: start; }
.spaces-modo-cuerpo { display: grid; gap: .5rem; }
.spaces-modo-cuerpo:empty { display: none; }
.spaces-modo .campo { display: grid; gap: .2rem; }
.spaces-modo .campo span { font-size: .8rem; color: var(--letra-2, #666); }
.spaces-modo input[type="text"], .spaces-modo select { font: inherit; border: 1px solid var(--linea, #ccc); border-radius: 6px; padding: .4rem .55rem; max-width: 100%; }
.spaces-modo .escaparate-si { display: flex; gap: .5rem; align-items: center; }
.spaces-modo .escaparate-si input { width: auto; margin: 0; }
.spaces-modulos { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.spaces-modulos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .35rem .5rem; border: 1px solid var(--linea, #ddd); border-radius: 8px; background: var(--superficie, #fff); }
.spaces-modulo-n { font-size: .75rem; font-weight: 700; color: var(--acento, #b7791f); white-space: nowrap; }
.spaces-modulo-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spaces-modulo-acc { display: flex; gap: .2rem; }

/* v2.00: aviso de contenido del material que no ha entrado en el curso */
.cobertura-aviso { border: 1px solid var(--ambar, #e0a23a); border-left-width: 4px; border-radius: var(--radio); background: var(--superficie); padding: .7rem 1rem; margin: 0 0 1rem; }
.cobertura-aviso > summary { cursor: pointer; }
.cobertura-aviso > p { margin: .5rem 0; }
.cobertura-lista { display: grid; gap: .8rem; }
.cobertura-grupo { border-top: 1px solid var(--borde); padding-top: .6rem; }
.cobertura-grupo ul { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.cobertura-grupo li { margin: .15rem 0; }
.cobertura-aviso .acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* v2.02: Ringmaster, «igual que un curso tuyo» */
.ring-modelo { border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; margin: .4rem 0 .6rem; background: var(--superficie); }
.ring-modelo .campo { max-width: 32rem; }
.ring-nota-modelo { margin: .4rem 0 0; }

/* v2.04: landing escueta: tres frases de lo esencial, seis posibilidades y tres capturas */
.portada-v4 .seccion { padding: 3.2rem 0; }
.cifras-portada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: 1rem !important; }
.cifras-portada > div { display: grid; gap: .35rem; padding: 1.2rem 1.3rem; border-left: 2px solid #e0a23a; }
.cifras-portada b { font-family: var(--f-marca); font-size: 1.25rem; }
.cifras-portada span { color: #a3a9b6; font-size: .95rem; line-height: 1.5; }
.posibilidades-6 { grid-template-columns: repeat(3, 1fr); }
.franja-3 .franja { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
@media (max-width: 960px) { .posibilidades-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cifras-portada, .posibilidades-6, .franja-3 .franja { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .posibilidades-6 .posibilidad { grid-template-columns: 40px 1fr; column-gap: .9rem; row-gap: .2rem; padding: 1rem 1.1rem; }
  .posibilidades-6 .posibilidad-icono { grid-row: span 2; width: 40px; height: 40px; }
  .posibilidades-6 .posibilidad h3 { margin: 0; }
  .portada-v4 .seccion { padding: 2.4rem 0; }
}

/* v2.05: varios cursos a la vez en Mis cursos y acciones de carpeta */
.boton-seleccionar { display: inline-flex; align-items: center; gap: .4rem; }
.boton-seleccionar[aria-pressed="true"] { border-color: var(--acento, #3b5bdb); color: var(--acento, #3b5bdb); }
.barra-seleccion { position: sticky; top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .6rem 0; padding: .6rem .9rem; border-radius: 12px; background: var(--superficie, #fff); border: 1px solid var(--borde, #dfe3ea); box-shadow: 0 6px 20px rgba(20, 30, 50, .08); }
.barra-seleccion[hidden] { display: none; }
.barra-seleccion .sel-cuenta { margin-right: auto; }
.rejilla-cursos.seleccionando .tarjeta-curso { position: relative; }
.rejilla-cursos.seleccionando .tarjeta-enlace { cursor: pointer; }
.marca-curso { position: absolute; top: .6rem; left: .6rem; z-index: 3; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--acento, #3b5bdb); cursor: pointer; }
.rejilla-cursos.seleccionando .tarjeta-curso.elegida { outline: 2px solid var(--acento, #3b5bdb); outline-offset: 2px; }
.rejilla-cursos.en-lista.seleccionando .tarjeta-curso { padding-left: 2.2rem; }
.rejilla-cursos.en-lista .marca-curso { top: 50%; transform: translateY(-50%); }
.acciones-carpeta { display: inline-flex; flex-wrap: wrap; gap: .2rem .8rem; }
.dialogo-carpeta { width: min(620px, calc(100vw - 2rem)); }
.dialogo-carpeta .campo { display: grid; gap: .3rem; margin: .7rem 0; }
.dialogo-carpeta .spaces-modos { margin: .3rem 0 .4rem; }
.spaces-carpeta-estado.error { color: var(--peligro, #c92a2a); }

/* v2.08: carpetas como directorio en Mis cursos */
.carpetas-cursos[hidden] { display: none; }
.ruta-carpeta { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; font-size: 1.05rem; }
.ruta-carpeta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ruta-sep { color: var(--tinta-2); }
.ruta-icono { display: inline-flex; color: var(--acento); }
.volver-carpetas.soltar { outline: 2px dashed var(--acento); outline-offset: 3px; }
.carpetas-cursos .acciones-carpeta { margin-left: auto; }
.tarjeta-carpeta { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; min-height: 9.5rem; padding: 1.2rem 1.25rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.tarjeta-carpeta:hover, .tarjeta-carpeta:focus-visible { border-color: var(--acento); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(20, 30, 50, .08); }
.tarjeta-carpeta > svg { color: var(--acento); }
.tarjeta-carpeta.soltar { outline: 2px dashed var(--acento); outline-offset: 2px; background: var(--superficie-2); }
.carpeta-texto { display: grid; gap: .25rem; min-width: 0; width: 100%; }
.carpeta-texto strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carpeta-muestra { font-size: .82rem; color: var(--tinta-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carpeta-nueva { border-style: dashed; justify-content: center; align-items: center; text-align: center; color: var(--tinta-2); background: transparent; }
.carpeta-nueva .carpeta-texto { justify-items: center; }
.carpeta-mas { font-size: 2rem; line-height: 1; color: var(--acento); }
.carpeta-form { flex-direction: row; flex-wrap: wrap; align-items: center; cursor: default; }
.carpeta-form:hover { transform: none; box-shadow: none; }
.carpeta-form input { flex: 1 1 100%; }
.rejilla-cursos.en-lista .tarjeta-carpeta { flex-direction: row; align-items: center; min-height: 0; padding: .8rem 1rem; }
.rejilla-cursos.en-lista .carpeta-muestra { -webkit-line-clamp: 1; }
.rejilla-cursos.en-lista .carpeta-nueva { justify-content: flex-start; }
.rejilla-cursos.en-lista .carpeta-mas { font-size: 1.4rem; }
.zona-carpetas[hidden], .titulo-zona-cursos[hidden] { display: none; }
.rejilla-carpetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .9rem; margin: .4rem 0 1.4rem; }
.rejilla-carpetas .tarjeta-carpeta { min-height: 0; gap: .5rem; padding: 1rem 1.1rem; }
.rejilla-carpetas .carpeta-nueva { min-height: 6.5rem; }
.titulo-zona-cursos { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin: .2rem 0 .7rem; font-family: inherit; }

.lista-borrar { max-height: 14rem; overflow: auto; margin: .5rem 0 1rem; padding-left: 1.2rem; }
.barra-seleccion .boton-peligro.pequeno { padding: .35rem .8rem; font-size: .9rem; }

/* v2.23: Contenido › Metadatos */
.metadatos { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr; gap: 0; margin: 1rem 0 0; border-top: 1px solid var(--borde); }
.metadatos dt, .metadatos dd { margin: 0; padding: .6rem .2rem; border-bottom: 1px solid var(--borde); }
.metadatos dt { color: var(--tinta-2); }
.metadatos dd { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) { .metadatos { grid-template-columns: 1fr; } .metadatos dt { border-bottom: 0; padding-bottom: 0; } }

/* v2.24 */
.ring-mando { flex-wrap: wrap; }
.ring-aviso-cron { flex-basis: 100%; max-width: 34rem; }

/* v2.25: Ringmaster Composer */
.composer { max-width: 1320px; }
.cmp { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(300px, 1.3fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.cmp-col { padding: 1rem; min-width: 0; }
.cmp-col h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.cmp-filtros { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .7rem; }
.cmp-filtros input, .cmp-filtros select { width: 100%; }
.cmp-lista { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow: auto; }
.cmp-curso { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radio); padding: .55rem .6rem; font: inherit; color: inherit; cursor: pointer; }
.cmp-curso:hover { border-color: var(--borde); }
.cmp-curso.activo { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.cmp-cuenta { font-size: .78rem; font-weight: 600; color: var(--acento-fuerte); }
.cmp-cap, .cmp-pieza { display: flex; align-items: center; gap: .4rem; padding: .45rem .2rem; border-bottom: 1px solid var(--borde); }
.cmp-cap label { display: flex; align-items: flex-start; gap: .55rem; flex: 1; min-width: 0; cursor: pointer; }
.cmp-cap label input { margin-top: .25rem; }
.cmp-cap label span, .cmp-pieza-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmp-pieza { cursor: grab; }
.cmp-pieza.arrastrando { opacity: .5; }
.cmp-num { min-width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--acento); color: var(--sobre-acento); }
.cmp-ico { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; flex: none; }
.cmp-ico:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.cmp-ico svg { width: 18px; height: 18px; }
.cmp-ico.peligro { color: var(--error); }
.cmp-modo { border: 1px solid var(--borde); border-radius: var(--radio); padding: .6rem .8rem; margin: 1rem 0; display: flex; flex-direction: column; gap: .6rem; }
.cmp-aviso { font-size: .9rem; padding: .6rem .8rem; border-radius: var(--radio); background: color-mix(in srgb, var(--acento) 14%, transparent); }
.cmp-vacio { padding: 1rem 0; }
.cmp-nuevo progress { width: 100%; }
@media (max-width: 980px) { .cmp { grid-template-columns: 1fr; } .cmp-lista { max-height: none; } }
.cmp-cap input[type=checkbox] { width: auto; flex: none; }
.cmp-col > .enlace { display: inline-block; text-align: left; padding-left: 0; margin-bottom: .4rem; }

/* v2.26: «Enriquecer con IA» */
/* v2.30: las acciones van aparte de los modos, como botones sueltos. */
.ed-barra-modos { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.ed-acciones { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.ed-acciones .ed-modo { border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); }
.ed-acciones .ed-modo:hover { border-color: var(--acento); color: var(--acento); background: var(--superficie); }
.ed-acciones .ed-enriquecer { color: var(--acento); }
dialog.historial.enr { width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 860px); overflow: auto; }
.enr .historial-cab h2 { display: inline-flex; align-items: center; gap: .5rem; }
.enr-opciones { display: grid; gap: .7rem; margin: .4rem 0 1rem; padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie-2); }
.enr-op { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .8rem; margin: 0; }
.enr-op select { width: auto; min-width: 11rem; }
.enr-op .sutil { grid-column: 1 / -1; font-size: .8rem; }
.enr-op-nombre { font-weight: 600; }
.enr-casilla { margin: 0; }
.enr-casilla input[type=checkbox], .enr-item input[type=checkbox] { width: auto; flex: none; }
.enr-lista { display: grid; gap: .4rem; max-height: 18rem; overflow: auto; padding-right: .3rem; }
.enr-grupo summary { cursor: pointer; padding: .3rem 0; }
.enr-grupo ul { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 .4rem; }
.enr-item { display: flex; align-items: baseline; gap: .5rem; margin: 0; padding: .18rem 0; font-size: .88rem; font-weight: 400; }
.enr-item > span:nth-child(2) { flex: 1; }
.enr-precio { white-space: nowrap; font-size: .8rem; }
.enr-total { margin: .9rem 0 .2rem; }
.enr-deshacer { margin: .4rem 0 0; font-size: .88rem; }
.enr progress { width: 100%; height: 12px; margin: .6rem 0 .3rem; accent-color: var(--acento); }
.enr-actual { font-size: .9rem; min-height: 1.3em; }
@media (max-width: 560px) { .enr-op { grid-template-columns: 1fr; } .enr-op select { width: 100%; } }

/* v2.27: imágenes y voces que se generan por detrás tras crear el curso. */
.aviso-generando { display: flex; align-items: center; gap: .6rem; }
.enr-girando { flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: girar 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .enr-girando { animation: none; } }

/* v2.27: Composer, buscador del curso plantilla. */
.cmp-col .campo { min-width: 0; }
.cmp-col .campo input, .cmp-col .campo select { width: 100%; max-width: 100%; box-sizing: border-box; }
.cmp-pl-busca { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cmp-pl-lista { list-style: none; margin: 0; padding: .25rem; max-height: 16rem; overflow-y: auto; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.cmp-pl-lista li { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; min-width: 0; }
.cmp-pl-lista li strong, .cmp-pl-elegida strong { overflow-wrap: anywhere; }
.cmp-pl-lista li:hover, .cmp-pl-lista li.activo { background: var(--fondo); outline: 2px solid var(--acento, #e0a23a); outline-offset: -2px; }
.cmp-pl-lista li.cmp-pl-nada { cursor: default; color: var(--texto-suave, #6b7280); outline: none; background: none; }
.cmp-pl-elegida { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); min-width: 0; }
.cmp-pl-elegida .cmp-pieza-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* v2.29: ventana «Exportar» del editor. */
dialog.historial.exp { width: min(760px, calc(100vw - 32px)); max-height: min(90vh, 900px); overflow: auto; }
.exp-grupo { margin-top: 1rem; }
.exp-grupo h3 { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); margin: 0 0 .3rem; }
.exp-fila { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
.exp-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.exp-txt .sutil { font-size: .84rem; }
.exp-botones { display: flex; gap: .4rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.exp-botones a { padding: .38rem .8rem; font-size: .88rem; }
.exp-pie { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--borde); }
@media (max-width: 560px) { .exp-fila { flex-direction: column; align-items: flex-start; } .exp-botones { justify-content: flex-start; } }

/* v2.30: Visor de jerarquía (diagrama del curso). */
dialog.jerarquia { width: calc(100vw - 32px); max-width: none; height: calc(100vh - 32px); max-height: none; border: 1px solid var(--borde); border-radius: 18px; padding: 1rem 1.2rem; background: var(--superficie); color: var(--tinta); box-shadow: 0 24px 60px rgba(15, 20, 30, .22); display: flex; flex-direction: column; }
dialog.jerarquia:not([open]) { display: none; }
dialog.jerarquia::backdrop { background: rgba(15, 20, 30, .35); }
.jq-herr { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-left: auto; }
.jq-leyenda { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--tinta-2); }
.jq-leyenda i { width: .8rem; height: .8rem; border-radius: 3px; margin-left: .4rem; display: inline-block; }
.jq-compacto { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.jq-compacto input { width: auto; height: auto; margin: 0; padding: 0; box-shadow: none; }
.jq-lienzo { flex: 1; overflow: auto; margin-top: .6rem; padding: 1rem .5rem 2rem; background: var(--superficie-2); border-radius: 12px; }
.jq-arbol { width: max-content; min-width: 100%; }
.jq-raiz { display: flex; justify-content: center; position: relative; padding-bottom: 1.4rem; }
.jq-raiz::after { content: ""; position: absolute; bottom: 0; left: 50%; height: 1.4rem; border-left: 2px solid var(--borde); }
.jq-nodo { display: flex; flex-direction: column; gap: .15rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); padding: .6rem .8rem; text-align: left; font: inherit; color: var(--tinta); }
.jq-nodo span, .jq-nodo small { font-size: .8rem; color: var(--tinta-2); }
.jq-curso { border: 2px solid var(--acento); max-width: 420px; text-align: center; align-items: center; }
.jq-curso strong { font-size: 1.05rem; }
.jq-ramas { display: flex; justify-content: center; gap: 1rem; position: relative; padding-top: 1.4rem; }
.jq-rama { position: relative; width: 230px; flex: none; }
.jq-rama::before { content: ""; position: absolute; top: -1.4rem; left: 50%; height: 1.4rem; border-left: 2px solid var(--borde); }
.jq-rama::after { content: ""; position: absolute; top: -1.4rem; left: -.5rem; right: -.5rem; border-top: 2px solid var(--borde); }
.jq-rama:first-child::after { left: 50%; }
.jq-rama:last-child::after { right: 50%; }
.jq-rama:only-child::after { display: none; }
.jq-cap { width: 100%; cursor: pointer; border-top: 3px solid var(--acento); }
.jq-cap:hover, .jq-bloque:hover { box-shadow: 0 0 0 2px var(--acento); }
.jq-final .jq-cap { border-top-color: #c0392b; }
.jq-bloques { list-style: none; margin: .5rem 0 0 .9rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--borde); }
.jq-bloques li { position: relative; margin: .35rem 0; }
.jq-bloques li::before { content: ""; position: absolute; left: -.9rem; top: 1rem; width: .8rem; border-top: 2px solid var(--borde); }
.jq-bloque { display: flex; flex-direction: column; gap: .15rem; width: 100%; text-align: left; font: inherit; border: 1px solid var(--borde); border-left: 4px solid #9aa3b2; border-radius: 8px; background: var(--superficie); padding: .35rem .55rem; cursor: pointer; color: var(--tinta); }
.jq-tipo { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.jq-tipo .icono-tipo { width: 14px; height: 14px; }
.jq-texto { font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.jq-historia, .jq-leyenda .jq-historia { border-left-color: #9aa3b2; background-color: #9aa3b2; }
.jq-concepto { border-left-color: #3b7dd8; }
.jq-reto { border-left-color: #e0a23a; }
.jq-bloque.jq-historia { background-color: var(--superficie); }
.jq-leyenda .jq-concepto { background: #3b7dd8; }
.jq-leyenda .jq-reto { background: #e0a23a; }
.jq-lienzo.compacto .jq-rama { width: 190px; }

/* v2.31: «Probar», destacado a la izquierda de la barra del editor; «Exportar» a la derecha, junto a Cerrar. */
.boton.boton-probar, .ec-cab .boton.ec-probar { background: #2e7d4f; border-color: #2e7d4f; color: #fff !important; font-weight: 700; padding: .5rem 1.15rem; box-shadow: 0 2px 8px rgba(46, 125, 79, .3); }
.boton.boton-probar:hover, .boton.boton-probar:focus-visible, .ec-cab .boton.ec-probar:hover, .ec-cab .boton.ec-probar:focus-visible { background: #256a42; border-color: #256a42; box-shadow: 0 0 0 3px rgba(46, 125, 79, .3); }

/* v2.34: «Editar curso», botón principal en la cabecera del curso; «Probar» verde en la vista previa */
.boton.boton-probar { display: inline-flex; align-items: center; text-decoration: none; }
.boton-editar.boton-editar-grande { font-size: 1.05rem; padding: .8rem 1.6rem; border-radius: 12px; }
.boton-editar.boton-editar-grande .pestana-icono { width: 20px; height: 20px; }
.cabecera-vista:has(.boton-editar-grande) { align-items: flex-end; }
@media (max-width: 720px) { .cabecera-botones:has(.boton-editar-grande) { width: 100%; } .boton-editar.boton-editar-grande { width: 100%; justify-content: center; } }

/* v2.36: Editar y Probar bajo las cifras del curso; logo con su nombre en el editor */
.botones-curso { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1.25rem; }
.boton.boton-curso { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3rem; padding: .6rem 1rem; font-size: 1.05rem; font-weight: 700; border-radius: 12px; }
.boton.boton-curso .pestana-icono { width: 20px; height: 20px; }
.boton.boton-curso-editar { background: #b45f14; border-color: #b45f14; color: #fff !important; box-shadow: 0 4px 14px rgba(180, 95, 20, .3); }
.boton.boton-curso-editar:hover, .boton.boton-curso-editar:focus-visible { background: #9a500f; border-color: #9a500f; }
.boton.boton-curso-probar { box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent); }
.ec-marca .ec-marca-nombre { font-family: var(--f-logo); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; color: var(--tinta); display: inline-flex; flex-direction: column; line-height: 1.1; } /* v2.64: la misma letra que el logo de la barra */
.ec-marca .marca-de { font-family: var(--f-logo); font-size: .6rem; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }

/* v2.37: nada se sale del bloque (un vídeo de la pizarra ensanchaba la rejilla y arrastraba los campos) */
.pizarra-ed, .bloque-ed .cuerpo-ed, .pz-medios-ed, .medio-actual { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.bloque-ed video, .bloque-ed iframe, .bloque-ed img { max-width: 100%; }
.medio-tiene > video.pz-video-ed { flex: 1 1 320px; width: 100%; max-width: 560px; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; }
.boton.boton-curso-probar { background: #2e7d4f; border-color: #2e7d4f; color: #fff !important; box-shadow: 0 4px 14px rgba(46, 125, 79, .3); }
.boton.boton-curso-probar:hover, .boton.boton-curso-probar:focus-visible { background: #256a42; border-color: #256a42; }
/* v2.37: con el nombre de Ludificator la barra del editor no cabía en pantallas medianas: ahí Enriquecer y Jerarquía quedan solo con su icono */
@media (max-width: 1440px) { .ec-cab .ed-acciones .ed-modo > span:not(.pestana-icono):not(.ed-validate-cuenta) { display: none; } .ec-cab .ed-acciones .ed-modo { padding-inline: .6rem; } }

/* v2.38: versión junto al logo; pestaña Portada */
.marca-version { align-self: flex-end; margin: 0 0 .3rem -.25rem; font-family: var(--f-ui); font-size: .62rem; font-weight: 500; letter-spacing: .02em; opacity: .62; }
.panel-portada { display: grid; gap: 1.2rem; }
.pt-marco { border-radius: 14px; overflow: hidden; border: 1px solid var(--borde); }
.pt-marco .portada-curso { width: 360px; pointer-events: none; }
.pt-cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; }
.pt-trata h2 { margin: 0 0 .3rem; }
.pt-sub { font-weight: 600; color: var(--tinta-2); margin: 0 0 .6rem; }
.pt-trata p { margin: 0 0 .6rem; line-height: 1.55; }
.pt-cuerpo h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-2); margin: 1rem 0 .5rem; }
.pt-indice h3 { margin-top: 0; }
.pt-objetivos ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.pt-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pt-indice li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .6rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.pt-n { grid-row: span 2; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #1a1408; font-weight: 700; font-size: .9rem; }
.pt-t { font-weight: 600; overflow-wrap: anywhere; }
.pt-c { font-size: .8rem; color: var(--tinta-2); }
@media (max-width: 760px) { .pt-cuerpo { grid-template-columns: minmax(0, 1fr); } }

/* v2.39: la portada en la cabecera del curso; tres cifras y, a su lado, Editar y Probar */
.oculto-visual { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cabecera-vista.con-portada > div { flex: 1 1 100%; }
.cabecera-vista.con-portada .pt-marco { margin-top: .2rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.datos-curso.con-botones { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 3fr); }
.datos-curso.con-botones .botones-curso { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: .5rem; margin: 0; }
.datos-curso.con-botones .boton.boton-curso { min-height: 0; flex: 1; }
@media (max-width: 900px) { .datos-curso.con-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .datos-curso.con-botones .botones-curso { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .datos-curso.con-botones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .datos-curso.con-botones .dato-curso { padding: .6rem; } .datos-curso.con-botones .dato-etiqueta { font-size: .65rem; } }
.pt-marco .pt-titulo { position: absolute; left: 14px; right: 104px; bottom: 12px; z-index: 2; font: 700 17px/1.1 var(--f-marca); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }
@media (max-width: 900px) { .datos-curso.con-botones .botones-curso { grid-template-rows: auto; } }

/* v2.41: Estado de la IA */
#estado-zona .conectores { display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.estado-res { display: grid; gap: .35rem; margin-top: .5rem; }
.estado-linea { margin: 0; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.estado-punto { width: .65rem; height: .65rem; border-radius: 50%; background: #c8ccd4; flex: none; align-self: center; }
.estado-linea.probando .estado-punto { background: #e0a43a; animation: estado-lat 1s infinite alternate; }
.estado-linea.bien .estado-punto { background: #2e9a5b; }
.estado-linea.mal .estado-punto { background: #d0473e; }
.estado-linea.mal span:last-child { color: #b23a32; }
@keyframes estado-lat { to { opacity: .35; } }
.estado-alto { color: #b23a32; font-weight: 600; }
.estado-fallos { list-style: none; padding: 0; display: grid; gap: .6rem; }
.estado-fallos li { border-left: 3px solid #d0473e; padding: .2rem .7rem; }
#estado-zona > div > h3 { margin: 1.4rem 0 .6rem; }

/* v2.42: «Enriquecer con IA» como página con apartados */
dialog.historial.enr.enr-pagina { width: min(1120px, 96vw); max-width: none; height: min(880px, 94vh); max-height: none; padding: 0; display: none; overflow: hidden; }
dialog.historial.enr.enr-pagina[open] { display: flex; flex-direction: column; }
dialog.enr-pagina .historial-cab { padding: 1rem 1.4rem .8rem; border-bottom: 1px solid var(--borde); margin: 0; flex: none; }
dialog.enr-pagina .enr-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
dialog.enr-pagina .enr-cuerpo > p, dialog.enr-pagina .enr-cuerpo > progress, dialog.enr-pagina .enr-cuerpo > .acciones { margin-left: 1.4rem; margin-right: 1.4rem; }
dialog.enr-pagina .enr-cuerpo > progress { width: calc(100% - 2.8rem); }
.enr-pagina-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.enr-nav { border-right: 1px solid var(--borde); padding: .9rem .6rem; display: flex; flex-direction: column; gap: .15rem; overflow: auto; background: var(--superficie-2); }
.enr-nav button { display: flex; align-items: center; gap: .55rem; text-align: left; background: none; border: 0; border-radius: 9px; padding: .55rem .7rem; font: inherit; font-size: .92rem; color: var(--texto); cursor: pointer; }
.enr-nav button:hover { background: var(--superficie); }
.enr-nav button.activo { background: var(--superficie); color: var(--acento); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.enr-nav .pestana-icono { width: 1.15rem; height: 1.15rem; flex: none; }
.enr-zona { overflow: auto; padding: 1rem 1.6rem 3rem; scroll-behavior: smooth; }
.enr-sec { padding: .4rem 0 1.4rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; }
.enr-sec:last-child { border-bottom: 0; }
.enr-sec > h3 { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .3rem; font-size: 1.15rem; }
.enr-sec > h3 .pestana-icono { width: 1.35rem; height: 1.35rem; color: var(--acento); }
.enr-sec .panel-locucion { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.enr-sec .panel-locucion > div:first-child > h2 { display: none; }
.enr-sec .enr-lista { max-height: none; }
.enr-pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.4rem; border-top: 1px solid var(--borde); background: var(--superficie); }
.enr-pie .enr-total { margin: 0; }
.enr-pie .acciones { margin: 0; }
.panel-voz-clon .voz-clon-lista { display: grid; gap: .5rem; margin: .6rem 0 1rem; }
.voz-clon-fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem .9rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); }
.voz-clon-nombre { flex: 1; min-width: 12rem; }
.voz-clon-form { padding: 1rem 1.1rem; border: 1px solid var(--borde); border-radius: 14px; }
.voz-clon-form h4 { margin: 0 0 .5rem; }
.voz-clon-pasos { margin: 0 0 .8rem; padding-left: 1.3rem; display: grid; gap: .8rem; }
.voz-clon-pasos .fila-botones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .45rem; align-items: center; }
.voz-clon-pasos .fila-botones input[type=text] { flex: 1; min-width: 12rem; }
.voz-clon-pasos .fila-botones select { width: auto; }
.voz-clon-texto { margin: .45rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--acento); background: var(--superficie-2); border-radius: 0 10px 10px 0; font-size: .92rem; line-height: 1.55; }
.voz-clon-estado { margin: .4rem 0 0; }
.panel-voz-clon audio { display: block; margin-top: .4rem; width: 100%; max-width: 26rem; }
.panel-voz-clon audio[hidden] { display: none; }
.voz-clon-permiso { margin: .2rem 0 .6rem; align-items: flex-start; }
.voz-clon-permiso input { width: auto; flex: none; margin-top: .2rem; }
@media (max-width: 760px) {
  .enr-pagina-cuerpo { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .enr-nav { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--borde); padding: .5rem; overflow-x: auto; }
  .enr-nav button { white-space: nowrap; }
  .enr-zona { padding: .8rem 1rem 2rem; }
}

/* v2.43: estilo de imagen propio */
.panel-estilo-img { display: grid; gap: 14px; }
.estilo-img-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.estilo-img-celda { display: grid; gap: 4px; justify-items: start; }
.estilo-img-celda > .estilo-img-op { width: 100%; }
.estilo-img-op { display: grid; gap: 4px; text-align: left; padding: 8px; border: 2px solid var(--borde); border-radius: 12px; background: var(--superficie-2); cursor: pointer; font: inherit; color: inherit; }
.estilo-img-op:hover:not(:disabled) { border-color: var(--acento); }
.estilo-img-op.elegido { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent); }
.estilo-img-op:disabled { opacity: .65; cursor: default; }
.estilo-img-op .sutil { font-size: .82em; }
.estilo-img-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); }
.estilo-img-minis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.estilo-img-minis img:only-child { grid-column: 1 / -1; grid-row: 1 / 3; }
.estilo-img-serie { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; place-items: center; opacity: .5; }
.estilo-img-serie svg { width: 34px; height: 34px; }
.estilo-img-subidas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.estilo-img-subida { position: relative; width: 72px; height: 54px; border-radius: 6px; overflow: hidden; }
.estilo-img-subida img { width: 100%; height: 100%; object-fit: cover; }
.estilo-img-quitar { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; line-height: 18px; padding: 0; cursor: pointer; }
.estilo-img-asistente { margin-top: 12px; }
.estilo-img-asistente summary { cursor: pointer; padding: 6px 0; }
.estilo-img-asistente[open] .panel-estilo-img { margin-top: 8px; }
.estilo-img-form { padding: 1rem 1.1rem; border: 1px solid var(--borde); border-radius: 14px; }
.estilo-img-form h4 { margin: 0 0 .5rem; }

/* v2.44: «Probar» en negro, en el editor y en la ficha del curso. */
.boton.boton-probar, .ec-cab .boton.ec-probar, .boton.boton-curso-probar { background: #111; border-color: #111; color: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.boton.boton-probar:hover, .boton.boton-probar:focus-visible, .ec-cab .boton.ec-probar:hover, .ec-cab .boton.ec-probar:focus-visible,
.boton.boton-curso-probar:hover, .boton.boton-curso-probar:focus-visible { background: #333; border-color: #333; box-shadow: 0 0 0 3px rgba(0, 0, 0, .25); }

/* v2.45: Validate. Tareas de la revisión (pósits), enlaces de revisión y la nota que acompaña al editor. */
.va-barra-tareas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.va-barra-tareas .boton-sec { margin-left: auto; }
.va-tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.va-tarea { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 6px 6px 6px 18px; background: #fff3b8; color: #3b2f05; border: 1px solid #ecd77c; cursor: pointer; box-shadow: 0 2px 6px rgba(59, 47, 5, .12); }
.va-tarea:hover, .va-tarea:focus-visible { box-shadow: 0 4px 14px rgba(59, 47, 5, .22); outline: none; }
.va-tarea.hecha { background: #e4f3e9; border-color: #b8dcc4; color: #23442f; }
.va-tarea.hecha .va-tarea-texto { text-decoration: line-through; opacity: .7; }
.va-tarea input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: #2f7a4a; cursor: pointer; }
.va-tarea-cuerpo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.va-tarea-lugar { font-size: 13px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.va-tarea-num { background: #3b2f05; color: #fff3b8; border-radius: 999px; min-width: 22px; text-align: center; font-size: 12px; padding: 0 6px; }
.va-tarea.hecha .va-tarea-num { background: #23442f; color: #e4f3e9; }
.va-tarea-texto { margin: 0; white-space: pre-wrap; }
.va-tarea:not(.abierta) .va-tarea-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.va-tarea-cita { margin: 0; font-size: 13px; font-style: italic; opacity: .85; }
.va-tarea-meta { font-size: 12px; color: inherit !important; opacity: .7; }
.va-tarea-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.va-vacio { padding: 16px; border: 1px dashed var(--borde, #ccc); border-radius: 10px; text-align: center; }
.va-crear { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0 18px; }
.va-crear .campo { flex: 1 1 220px; margin: 0; }
.va-crear .campo:nth-child(2) { flex: 0 1 180px; }
.va-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.va-enlace { border: 1px solid var(--borde, #d8d2c4); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.va-enlace.va-desactivado, .va-enlace.va-caducado { opacity: .72; }
.va-enlace-cab { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.va-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.va-chip-activo { background: #dcf1e3; color: #1f5c37; }
.va-chip-caducado { background: #fbe7cf; color: #8a4b0c; }
.va-chip-desactivado { background: #e7e7ea; color: #50525a; }
.va-enlace-url { display: flex; gap: 8px; }
.va-url { flex: 1; min-width: 0; font: 13px ui-monospace, monospace; }
.va-enlace-pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.va-caduca { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.va-caduca input { width: auto; }
.va-enlace-acc { margin-left: auto; display: flex; gap: 12px; }
.va-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: min(340px, calc(100vw - 32px)); background: #fff3b8; color: #3b2f05; border-radius: 6px 6px 6px 22px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(-.8deg); }
.va-flotante-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.va-flotante-cab .icono { color: #3b2f05; }
.va-flotante p { margin: 6px 0; }
.va-flotante-lugar { font-size: 13px; font-weight: 600; }
.va-flotante-cita { font-size: 13px; font-style: italic; }
.va-flotante-texto { white-space: pre-wrap; max-height: 40vh; overflow-y: auto; }
.va-flotante-pie { display: flex; justify-content: flex-end; margin-top: 8px; }
.va-flotante .boton { background: #3b2f05; border-color: #3b2f05; color: #fff3b8; }

/* v2.46: Validate dentro del editor: botón con las tareas pendientes y cajón a la derecha. */
.ed-acciones .ed-validate { position: relative; }
.ed-validate .ed-validate-cuenta { margin-left: .2rem; background: #fff3b8; color: #3b2f05; }
.va-cajon { position: fixed; top: 0; right: 0; bottom: 0; z-index: 940; width: min(560px, 100vw); background: var(--fondo); border-left: 1px solid var(--borde); box-shadow: -18px 0 40px rgba(0, 0, 0, .22); display: flex; flex-direction: column; }
.va-cajon-cab { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
.va-cajon-cab strong { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; }
.va-cajon-dentro { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.va-cajon-tabs { display: flex; gap: .25rem; padding: .6rem 1rem 0; border-bottom: 1px solid var(--borde); }
.va-cajon-tab { border: 0; background: none; padding: .5rem .8rem; border-bottom: 2px solid transparent; font-weight: 600; color: var(--tinta-suave, #666); cursor: pointer; }
.va-cajon-tab.activo { color: var(--tinta); border-bottom-color: var(--acento); }
.va-cajon-cuerpo { flex: 1; overflow-y: auto; padding: 1rem; }
.va-cajon-cuerpo .panel { margin: 0; box-shadow: none; }
/* v2.47: Compositor en pestañas (recursos/compositor.js). */
.cpt-panel { padding-top: .2rem; }
.cpt-panel .unir-cols { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.cpt-panel .unir-lista { max-height: 30rem; }
.cpt-filtros { display: flex; gap: .5rem; margin-bottom: .5rem; }
.cpt-filtros input { flex: 1; min-width: 0; }
.cpt-filtros select { flex: none; max-width: 45%; }
.cpt-marcar { display: flex; gap: 1rem; margin: 0 0 .5rem; font-size: .85rem; }
.cpt-vacio { padding: 1.2rem 0; }
.cpt-hecho { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 10px; background: var(--superficie-2); display: grid; gap: .4rem; }
.cpt-nuevos { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; max-height: 16rem; overflow: auto; }
.cpt-panel .acciones { margin-top: 1rem; }
.cpt-panel .separar-corte .pestana-icono { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 760px) { .cpt-panel .unir-cols { grid-template-columns: 1fr; } .cpt-filtros { flex-direction: column; } .cpt-filtros select { max-width: none; } }
/* v2.47: Exportar, Probar y Cerrar del editor, solo con el icono. */
.ec-cab .ec-solo-icono, .ec-cab .ec-exportar { padding: .5rem .65rem !important; min-width: 2.5rem; justify-content: center; display: inline-flex; align-items: center; }
.ec-cab .ec-solo-icono .pestana-icono, .ec-cab .ec-exportar .pestana-icono { width: 1.15rem; height: 1.15rem; margin: 0; }
.ec-cab .ec-probar .pestana-icono { fill: currentColor; }
.cpt-panel .campo select { width: 100%; max-width: 100%; }
.cpt-panel .separar-cab .enlace { white-space: nowrap; }
/* v2.47: en el móvil, los enlaces de la barra (Mis cursos, Lotes, Compositor, Administración) se desplazan de lado sin partirse. */
@media (max-width: 640px) {
  .barra-izq { overflow-x: auto; scrollbar-width: none; }
  .barra-izq::-webkit-scrollbar { display: none; }
  .barra-izq .ir-cursos { white-space: nowrap; flex: none; }
  .barra-izq .marca { flex: none; }
}
/* v2.48: tareas apuntadas a mano en Validate › Tareas. */
.va-anadir { margin: .4rem 0 .2rem; }
.va-nueva { display: grid; gap: .6rem; padding: .8rem; margin: .5rem 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.va-nueva textarea { width: 100%; resize: vertical; }
.va-nueva-donde { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .6rem; }
.va-nueva-donde select, .va-nueva-donde input { width: 100%; }
.va-nueva-pie { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
/* v2.48: la portada grande, arriba de la pestaña Resumen. */
.pt-portada .pt-marco { margin: 0; }
/* v2.48: Un curso por capítulo, de una carpeta entera y con carpeta de destino. */
.cpt-panel .segmentos { margin: .4rem 0 1rem; }
.cpt-opciones { display: grid; gap: .6rem; margin-top: 1rem; max-width: 34rem; }
.cpt-destino input { margin-top: .4rem; }
.cpt-hecho .error { color: var(--peligro, #c92a2a); }
.separar-cuerpo > .campo { max-width: 34rem; }
/* v2.51: casilla «Quitar el desafío final» al separar */
.cpt-sin-final span { display: grid; gap: .15rem; }
.cpt-sin-final small { color: var(--tinta-2); font-size: .84rem; line-height: 1.35; }
.cpt-opciones label.interruptor, .cpt-opciones label.interruptor + label.interruptor { margin: 0; }
.cpt-casillas { display: grid; gap: .6rem; margin-top: 1rem; }
.cpt-casillas label.interruptor, .cpt-casillas label.interruptor + label.interruptor { margin: 0; }

/* v2.58: cola de creación (Administración) */
.cola-cifras { margin-top: .4rem; }
.cola-estado { display: inline-block; font-size: .78rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.cola-estado.creando { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.cola-estado.espera { background: color-mix(in srgb, var(--tinta-2) 14%, transparent); }
.cola-estado.error { background: color-mix(in srgb, #d64545 16%, transparent); color: #b23a3a; }
.cola-tabla td .sutil { font-size: .75rem; }
.creando-cola { display: grid; gap: .35rem; padding: .9rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--acento) 10%, transparent); margin-bottom: .6rem; }
.creando-cola strong { font-size: 1.05rem; }