/* AIM Genera · El cuarto de revelado.
   Grafito cálido y blanco papel; el ámbar de la luz de seguridad solo cuando algo se está
   revelando (la «exposición», el único movimiento de la app). El acento de los botones es el de la
   estética que el usuario eligió en la suite, como en los demás editores. Una sola familia:
   Bricolage, con la instrucción grande porque el texto es lo que crea. */

@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fuentes/bricolage-latin.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fuentes/bricolage-latin-ext.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fondo: #121110;
  --hoja: #1a1816;
  --hoja-2: #232019;
  --linea: #35312b;
  --texto: #efe8dc;
  --tenue: #a49b8c;
  --ambar: #e3a646;
  --ambar-hondo: #7a4c12;
  --peligro: #ff8a7a;

  --acento: #378ef0;
  --sobre-acento: #ffffff;

  --radio: 12px;
  --pliego: 440px;
  color-scheme: dark;
}
:root[data-tema="claro"] {
  --fondo: #e9e8e4;
  --hoja: #f7f6f3;
  --hoja-2: #efede8;
  --linea: #d2cfc8;
  --texto: #191713;
  --tenue: #5e594f;
  --ambar: #a76b14;
  --ambar-hondo: #f1d7a8;
  --peligro: #b0281a;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --fondo: #e9e8e4;
    --hoja: #f7f6f3;
    --hoja-2: #efede8;
    --linea: #d2cfc8;
    --texto: #191713;
    --tenue: #5e594f;
    --ambar: #a76b14;
    --ambar-hondo: #f1d7a8;
    --peligro: #b0281a;
    color-scheme: light;
  }
}
/* el acento, el de la estética de la suite */
html[data-estetica="futuristic"] { --acento: #00d6f0; --sobre-acento: #06070a; }
html[data-estetica="calm"] { --acento: #5896e6; --sobre-acento: #ffffff; }
html[data-estetica="focus"] { --acento: #34ba7c; --sobre-acento: #06070a; }
html[data-estetica="energy"] { --acento: #ff7a3e; --sobre-acento: #06070a; }
html[data-estetica="inspiration"] { --acento: #a076ff; --sobre-acento: #ffffff; }
html[data-estetica="joy"] { --acento: #f0ba1e; --sobre-acento: #06070a; }
html[data-estetica="serenity"] { --acento: #e876a4; --sobre-acento: #06070a; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; padding: 10px 14px; background: var(--hoja); border-radius: 8px; z-index: 50; }
.saltar:focus { top: 12px; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Barra ---- */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; font-size: 17px; text-decoration: none; letter-spacing: 0.005em; white-space: nowrap; }
.marca .tesela { width: 26px; height: 26px; flex: none; }
.marca-nombre { font-family: "Bricolage", system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.marca-nombre .aim { color: var(--tenue); }
.beta { font-size: 11px; font-weight: 650; padding: 3px 8px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tenue); letter-spacing: 0.02em; }
.barra-der { display: flex; align-items: center; gap: 8px; }
.saldo { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); font-size: 14px; color: var(--tenue); }
.saldo-n { font-size: 16px; font-weight: 720; color: var(--texto); font-variant-numeric: tabular-nums; }
.saldo.bajo .saldo-n { color: var(--ambar); }
.icono { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--tenue); }
.icono:hover { color: var(--texto); background: var(--hoja-2); }
.cuenta { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--tenue); text-decoration: none; padding: 6px 4px; }
.cuenta:hover { color: var(--texto); }

.aviso { margin: 12px 20px 0; padding: 12px 16px; border-radius: var(--radio); background: var(--hoja-2); border: 1px solid var(--linea); font-size: 15px; }
.aviso.error { border-color: color-mix(in srgb, var(--peligro) 50%, var(--linea)); }

/* ---- Estudio: pliego y muro ---- */
.estudio { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1000px) {
  .estudio { grid-template-columns: var(--pliego) 1fr; min-height: calc(100vh - 59px); }
  .pliego { position: sticky; top: 59px; align-self: start; max-height: calc(100vh - 59px); overflow-y: auto; border-right: 1px solid var(--linea); scrollbar-width: thin; }
}

.pliego { padding: 22px 22px 40px; display: flex; flex-direction: column; gap: 18px; }

/* operaciones: tres grupos con su nombre delante */
.ops { display: flex; flex-direction: column; gap: 8px; }
.ops-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ops-titulo { width: 100%; font-size: 13px; color: var(--tenue); margin: 4px 0 2px; }
.ops button {
  padding: 7px 13px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  font-size: 14.5px;
  color: var(--tenue);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.ops button:hover { color: var(--texto); border-color: var(--tenue); }
.ops button[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); font-weight: 600; }
.op-ayuda { margin: -4px 0 0; font-size: 14.5px; color: var(--tenue); max-width: 46ch; }

/* referencias */
.refs, .final { display: flex; flex-direction: column; gap: 8px; }
.refs-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.ref { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--hoja-2); border: 1px solid var(--linea); }
.ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref.subiendo img { opacity: 0.45; }
.ref.subiendo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--ambar) 40%, transparent) 50%, transparent 70%); background-size: 200% 100%; animation: barrido 1.2s linear infinite; }
.ref-progreso { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; padding: 0 6px 6px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none; }
.ref-pct { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ref-barra { display: block; width: 100%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.ref-barra > i { display: block; height: 100%; background: var(--ambar); transform: scaleX(0); transform-origin: left center; transition: transform 0.15s linear; }
.ref button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.62); color: #fff; display: grid; place-items: center; }
.ref button svg { width: 12px; height: 12px; stroke-width: 2.4; }
.refs-anadir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1.5px dashed var(--linea);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--tenue);
  cursor: pointer;
  padding: 6px;
}
.refs-anadir:hover, .refs-anadir:focus-within { border-color: var(--tenue); color: var(--texto); }
.refs-anadir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.refs-anadir.pequeno { width: auto; height: 34px; padding: 0 12px; }
.refs-nota { margin: 0; font-size: 13.5px; color: var(--tenue); }
.final-titulo { font-size: 13.5px; color: var(--tenue); }

/* la instrucción: el texto es el protagonista */
.instruccion { border: 1px solid var(--linea); border-radius: 16px; background: var(--hoja); transition: border-color 160ms ease; }
.instruccion:focus-within { border-color: var(--tenue); }
.instruccion textarea {
  display: block;
  width: 100%;
  min-height: 132px;
  max-height: 46vh;
  padding: 16px 18px 6px;
  border: 0;
  background: transparent;
  resize: vertical;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 430;
  letter-spacing: -0.012em;
  outline: none;
}
.instruccion textarea::placeholder { color: color-mix(in srgb, var(--tenue) 70%, transparent); }
.instruccion-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 8px 10px; }
.mejorar { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tenue); font-size: 14px; }
.mejorar:hover { background: var(--hoja-2); color: var(--texto); }
.mejorar svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.mejorar.trabajando svg { animation: latido 1s ease-in-out infinite; }
.contador { font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }

/* modos */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 7px; font-size: 13px; color: var(--tenue); }
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.modos legend { grid-column: 1 / -1; }
.modos label { position: relative; }
.modos input { position: absolute; opacity: 0; }
.modos label span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.modos b { font-weight: 650; font-size: 15.5px; }
.modos small { font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.modos input:checked + span { border-color: var(--texto); background: var(--hoja-2); }
.modos input:focus-visible + span { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.modos.unico { display: none; }
.modos .pill-plus { position: absolute; top: 7px; right: 8px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--acento); color: var(--acento); font-style: normal; font-size: 11px; font-weight: 650; }
.modos .pill-plus[hidden] { display: none; }
.modos-plus { margin: 8px 0 0; font-size: 13.5px; color: var(--tenue); line-height: 1.45; }
.modos-plus[hidden] { display: none; }
.modos-plus .boton-plus, .generar-nota .enlace-plus { display: inline-block; margin-top: 4px; color: var(--acento); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }

/* ajustes */
.ajustes { display: flex; flex-direction: column; gap: 14px; }
.aspectos-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.aspecto { position: relative; }
.aspecto input { position: absolute; opacity: 0; }
.aspecto span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
  cursor: pointer;
}
.aspecto i { display: block; border: 1.6px solid currentColor; border-radius: 2px; }
.aspecto b { font-weight: 500; }
.aspecto small { font-size: 12px; color: var(--tenue); }
.aspecto input:checked + span { color: var(--texto); border-color: var(--texto); background: var(--hoja-2); }
.aspecto input:focus-visible + span { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 10px; padding: 3px; gap: 2px; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; }
.segmentos span { display: block; min-width: 46px; padding: 6px 12px; border-radius: 7px; text-align: center; font-size: 14px; color: var(--tenue); cursor: pointer; font-variant-numeric: tabular-nums; }
.segmentos input:checked + span { background: var(--texto); color: var(--fondo); font-weight: 600; }
.segmentos input:focus-visible + span { outline: 2.5px solid var(--acento); outline-offset: 1px; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; }
.interruptor input { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--linea); position: relative; cursor: pointer; transition: background-color 160ms ease; }
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto); transition: transform 160ms ease; }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { transform: translateX(16px); background: var(--sobre-acento); }

/* generar */
.generar-zona { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.generar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-size: 18px;
  font-weight: 680;
  transition: filter 140ms ease, transform 140ms ease;
}
.generar:hover { filter: brightness(1.07); }
.generar:active { transform: scale(0.99); }
.generar:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; }
.generar-coste { font-size: 14.5px; font-weight: 560; opacity: 0.86; font-variant-numeric: tabular-nums; }
.generar-nota { margin: 0; font-size: 13.5px; color: var(--tenue); min-height: 1.5em; }
.generar-nota.error { color: var(--peligro); }

.sobre { border-top: 1px solid var(--linea); padding-top: 14px; font-size: 14.5px; color: var(--tenue); }
.sobre summary { cursor: pointer; color: var(--texto); }
.sobre p { margin: 10px 0 0; max-width: 52ch; }

/* ---- Muro ---- */
.muro { padding: 22px 22px 60px; min-width: 0; }
.muro-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 18px; }
.muro h2 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.muro-nota { margin: 0; font-size: 14px; color: var(--tenue); }
.muro-vistas { display: flex; gap: 18px; }
.muro-vistas button { padding: 0; border: 0; background: none; font: inherit; font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--tenue); cursor: pointer; }
.muro-vistas button[aria-selected="true"] { color: var(--texto); }
.muro-vistas button:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.bib-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: -6px 0 16px; }
.bib-barra[hidden] { display: none; }
#bib-q { flex: 1 1 220px; min-width: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja-2); font: inherit; font-size: 14.5px; color: var(--texto); }
.bib-carpetas { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 60%; }
.bib-carpetas button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: none; font: inherit; font-size: 13.5px; color: var(--tenue); cursor: pointer; }
.bib-carpetas button[aria-pressed="true"] { color: var(--texto); border-color: var(--texto); }
.bib-carpetas button small { font-variant-numeric: tabular-nums; }
.bib-carpetas .nueva { border-style: dashed; }
.bib-uso { margin-left: auto; font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, #8a857c); }
.punto[data-c="rojo"] { --c: #e0574f; } .punto[data-c="naranja"] { --c: #ef8d3a; } .punto[data-c="amarillo"] { --c: #e2c043; }
.punto[data-c="verde"] { --c: #4fb06d; } .punto[data-c="azul"] { --c: #4c8ef0; } .punto[data-c="violeta"] { --c: #9b6ee0; }
.carpeta-colores { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }
.carpeta-colores legend { margin-bottom: 6px; }
.carpeta-colores label { position: relative; }
.carpeta-colores input { position: absolute; opacity: 0; }
.carpeta-colores .punto { display: block; width: 26px; height: 26px; border: 2px solid transparent; cursor: pointer; }
.carpeta-colores input:checked + .punto { border-color: var(--texto); }
.carpeta-colores input:focus-visible + .punto { outline: 2.5px solid var(--acento); outline-offset: 1px; }
.guardado-marca { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; pointer-events: none; }
.guardado-marca svg { width: 14px; height: 14px; }
.visor-carpeta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tenue); }
.visor-carpeta select { flex: 1; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja-2); color: var(--texto); font: inherit; font-size: 14px; }
.rejilla { columns: 3 250px; column-gap: 12px; }
.revelado {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--hoja);
  break-inside: avoid;
  text-align: left;
}
.revelado > img, .revelado > video, .revelado > canvas { display: block; width: 100%; height: auto; background: var(--hoja-2); }
.revelado.listo > img, .revelado.listo > video, .revelado.listo > canvas { animation: revelar 900ms ease-out both; }
.revelado .pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 26px 10px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.revelado:hover .pie, .revelado:focus-within .pie { opacity: 1; }
@media (hover: none) { .revelado .pie { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent); } }
.pie-texto { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.pie-acciones { display: flex; gap: 4px; flex: none; }
.pie-acciones button, .pie-acciones a { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; backdrop-filter: blur(6px); }
.pie-acciones button:hover, .pie-acciones a:hover { background: rgba(255, 255, 255, 0.3); }
.pie-acciones svg { width: 17px; height: 17px; }
.revelado .marca-tipo { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; backdrop-filter: blur(6px); }
.revelado .abrir { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: none; padding: 0; cursor: zoom-in; }
.revelado .abrir:focus-visible { outline-offset: -3px; }

/* la exposición: luz de seguridad ámbar y grano mientras se revela */
.revelado.exponiendo, .revelado.fallido {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  min-height: 160px;
  color: var(--tenue);
  font-size: 13.5px;
  isolation: isolate;
}
.revelado.exponiendo::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(42% 38% at 50% 55%, color-mix(in srgb, var(--ambar) 46%, transparent), transparent 72%),
    radial-gradient(70% 60% at 30% 30%, color-mix(in srgb, var(--ambar-hondo) 55%, transparent), transparent 75%);
  animation: exposicion 4.2s ease-in-out infinite alternate;
}
.revelado.exponiendo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grano 0.9s steps(4) infinite;
}
/* la cubeta de revelado es siempre oscura, también con el tema claro */
.revelado.exponiendo { background: #17140f; color: #b9ad98; --ambar: #e3a646; --ambar-hondo: #7a4c12; }
.exponiendo .estado-t { color: #f3ead9; font-weight: 600; font-size: 14px; }
.exponiendo .estado-tiempo { font-variant-numeric: tabular-nums; }
/* progreso: el porcentaje no se para nunca (avanza cada vez más despacio pasado el tiempo previsto) */
.exponiendo .progreso-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.exponiendo .progreso-n { color: #f3ead9; font-size: clamp(20px, 2.2vw, 28px); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.exponiendo .progreso-barra { display: block; height: 4px; margin: 9px 0 7px; border-radius: 999px; background: rgba(243, 234, 217, 0.14); overflow: hidden; }
.exponiendo .progreso-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--ambar); box-shadow: 0 0 10px color-mix(in srgb, var(--ambar) 70%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 0.2s linear; }
.revelado.fallido { background: var(--hoja); border: 1px dashed var(--linea); }
.fallido .estado-t { color: var(--texto); font-weight: 600; }
.fallido .reintentar { align-self: flex-start; margin-top: 8px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: none; font-size: 13.5px; }

/* vacío: ideas para empezar */
.muro-vacio { max-width: 720px; padding: 18px 0 30px; color: var(--tenue); }
.vacio-titulo { margin: 0 0 4px; font-size: 22px; font-weight: 650; color: var(--texto); letter-spacing: -0.015em; }
.ideas { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ideas button { text-align: left; padding: 12px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: transparent; font-size: 16px; line-height: 1.4; color: var(--texto); }
.ideas button:hover { background: var(--hoja); border-color: var(--tenue); }
.ideas small { display: block; margin-top: 2px; font-size: 13px; color: var(--tenue); }
.mas { display: block; margin: 20px auto 0; padding: 10px 20px; border: 1px solid var(--linea); border-radius: 999px; background: none; color: var(--tenue); }
.mas:hover { color: var(--texto); border-color: var(--tenue); }

/* puerta (sin cuenta) */
.puerta { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; justify-content: center; padding: 16px; pointer-events: none; }
.puerta-caja { pointer-events: auto; max-width: 560px; width: 100%; padding: 20px 22px; border: 1px solid var(--linea); border-radius: 18px; background: var(--hoja); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.puerta-titulo { margin: 0 0 4px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.puerta-caja p { margin: 0 0 14px; color: var(--tenue); font-size: 15px; }
.boton-luz { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-weight: 650; text-decoration: none; }
.boton-luz:hover { filter: brightness(1.07); }

/* ---- Visor ---- */
dialog { color: var(--texto); }
dialog::backdrop { background: rgba(8, 7, 6, 0.86); backdrop-filter: blur(6px); }
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; display: none; }
.visor[open] { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
@media (min-width: 900px) { .visor[open] { grid-template-columns: 1fr 360px; grid-template-rows: 1fr; } }
.visor-medio { display: grid; place-items: center; padding: 56px 20px 20px; min-height: 0; min-width: 0; }
.visor-medio img, .visor-medio video, .visor-medio canvas { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 8px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); background: repeating-conic-gradient(#3a3a3a 0 25%, #2c2c2c 0 50%) 0 0 / 20px 20px; }
.visor-lado { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 24px; background: var(--hoja); border-left: 1px solid var(--linea); overflow-y: auto; }
@media (min-width: 900px) { .visor-lado { padding-top: 64px; } }
.visor-prompt { margin: 0; font-size: 18px; line-height: 1.38; letter-spacing: -0.01em; }
.visor-datos { margin: 0; font-size: 13.5px; color: var(--tenue); }
.visor-capas { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.visor-capas p { margin: 0 0 4px; color: var(--tenue); font-size: 13px; }
.visor-capas label { display: flex; align-items: center; gap: 8px; }
.visor-acciones { display: flex; flex-direction: column; gap: 6px; }
.visor-versiones .grupo-t { margin: 0 0 6px; font-size: 13px; color: var(--tenue); }
.versiones-tira { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.version { flex: none; width: 52px; height: 52px; padding: 0; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: var(--hoja-2); display: grid; place-items: center; cursor: pointer; }
.version img { width: 100%; height: 100%; object-fit: cover; display: block; }
.version-op { font-size: 10.5px; line-height: 1.15; padding: 3px; color: var(--tenue); text-align: center; }
.version:hover:not(:disabled) { border-color: var(--tenue); }
.version.actual { outline: 2px solid var(--acento); outline-offset: 1px; cursor: default; }
.version.pendiente:not(.actual) { opacity: 0.45; cursor: default; }
.versiones-rama { flex: none; width: 14px; height: 1px; background: var(--tenue); }
.visor-acciones .grupo-t { margin: 8px 0 2px; font-size: 13px; color: var(--tenue); }
.medidas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 0 4px; }
.medidas[hidden] { display: none; }
.medidas-nota { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--tenue); }
.medida { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 10px; background: transparent; text-align: left; font-size: 14px; }
.medida small { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.medida:hover { background: var(--hoja-2); border-color: var(--tenue); }
.accion { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: transparent; text-align: left; font-size: 15px; text-decoration: none; }
.accion:hover { background: var(--hoja-2); border-color: var(--tenue); }
.accion.principal { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); font-weight: 620; }
.accion.principal:hover { filter: brightness(1.07); background: var(--acento); }
.accion.peligro { color: var(--peligro); }
.accion svg { width: 18px; height: 18px; flex: none; }
.visor-ia { margin: auto 0 0; font-size: 12.5px; color: var(--tenue); }
.visor-cerrar { position: fixed; top: 12px; right: 12px; z-index: 2; color: #fff; background: rgba(0, 0, 0, 0.45); }
.visor-ant, .visor-sig { position: fixed; top: 50%; z-index: 2; color: #fff; background: rgba(0, 0, 0, 0.45); }
.visor-ant { left: 12px; }
.visor-sig { right: 12px; }
@media (min-width: 900px) { .visor-sig { right: 372px; } }

/* panel de créditos */
.panel { width: min(460px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--linea); border-radius: 18px; background: var(--hoja); }
.panel-titulo { margin: 0 0 12px; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.bolsa { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.bolsa small { display: block; color: var(--tenue); font-size: 13px; }
.bolsa b { font-variant-numeric: tabular-nums; }
.historial-t { margin: 18px 0 4px; font-size: 15px; font-weight: 680; }
.historial { max-height: 260px; overflow-y: auto; }
.mov { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.mov small { display: block; color: var(--tenue); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.mov b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mov.entra b { font-weight: 720; }
.mov-mas { margin-top: 8px; }
.garantia-sobre { margin-top: 12px; font-size: 14px; }
.garantia-sobre summary { cursor: pointer; font-weight: 620; }
.garantia-sobre p { margin: 6px 0 0; color: var(--tenue); line-height: 1.45; }
.garantia { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.garantia[hidden] { display: none; }
.garantia-motivos { display: flex; flex-wrap: wrap; gap: 6px; }
.garantia-motivos label { position: relative; }
.garantia-motivos input { position: absolute; opacity: 0; }
.garantia-motivos span { display: block; padding: 6px 10px; border: 1px solid var(--linea); border-radius: 999px; font-size: 13.5px; cursor: pointer; }
.garantia-motivos input:checked + span { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.garantia-motivos input:focus-visible + span { outline: 2.5px solid var(--acento); outline-offset: 1px; }
.garantia-texto { padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja-2); font: inherit; font-size: 14px; color: var(--texto); }
.garantia-nota { margin: 2px 0; font-size: 13px; color: var(--tenue); }
.panel-nota { margin: 12px 0 0; font-size: 14px; color: var(--tenue); }
.panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.enlace { background: none; border: 0; padding: 0; color: var(--tenue); text-decoration: underline; text-underline-offset: 3px; }

/* soltar archivos */
.soltar { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: color-mix(in srgb, var(--fondo) 80%, transparent); border: 3px dashed var(--ambar); pointer-events: none; }
.soltar p { font-size: 24px; font-weight: 650; }

@keyframes exposicion {
  from { transform: scale(1) translate(-2%, 1%); opacity: 0.65; }
  to { transform: scale(1.12) translate(2%, -2%); opacity: 1; }
}
@keyframes grano {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6px, 4px); }
  50% { transform: translate(5px, -3px); }
  75% { transform: translate(-3px, -5px); }
}
@keyframes revelar {
  from { opacity: 0; filter: brightness(1.6) sepia(0.7) blur(6px); }
  to { opacity: 1; filter: none; }
}
@keyframes barrido { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes latido { 50% { transform: scale(1.25); opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  .revelado.exponiendo::before, .revelado.exponiendo::after, .ref.subiendo::after, .mejorar.trabajando svg { animation: none; }
  .exponiendo .progreso-barra > span, .ref-barra > i { transition: none; }
  .revelado.listo > img, .revelado.listo > video, .revelado.listo > canvas { animation: none; }
}

/* chino: sin interletraje negativo */
html[lang="zh-Hans"] .instruccion textarea, html[lang="zh-Hans"] .muro h2, html[lang="zh-Hans"] .visor-prompt { letter-spacing: 0; }

@media (max-width: 520px) {
  .pliego, .muro { padding-left: 16px; padding-right: 16px; }
  .barra { padding: 8px 14px; }
  .instruccion textarea { font-size: 19px; }
  .rejilla { columns: 2 140px; column-gap: 8px; }
  .revelado { margin-bottom: 8px; }
  .cuenta { display: none; }
  .marca .beta { display: none; }
}

/* vitrina de ejemplos */
.vitrina { margin-top: 8px; }
.vitrina-titulo { margin: 8px 0 2px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.vitrina .muro-nota { margin: 0 0 16px; }
.muestra .pie { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.74), transparent); align-items: flex-end; }
.muestra .probar { flex: none; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #15130f; font-size: 13px; font-weight: 650; }
.muestra .probar:hover { background: #fff; }
.muestra.transparente { background: repeating-conic-gradient(#d9d6cf 0 25%, #f2f0eb 0 50%) 0 0 / 22px 22px; }
.puerta-botones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ===== Fase 2 ===== */

/* retocar: el pincel ámbar sobre la imagen */
.pincel { display: flex; flex-direction: column; gap: 10px; }
.pincel-lienzo { position: relative; align-self: flex-start; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--hoja-2); }
.pincel-lienzo img { display: block; max-width: 100%; max-height: 360px; }
.pincel-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
@media (pointer: fine) { .pincel-lienzo canvas { cursor: none; } }
.pincel-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--tenue); }
.pincel-tam { display: inline-flex; align-items: center; gap: 8px; }
.pincel-tam input, .orbita-controles input[type="range"] { accent-color: var(--ambar); width: 120px; }
#pincel-goma[aria-pressed="true"] { color: var(--texto); text-decoration-thickness: 2px; }

/* ángulo: la escena en su peana y la cámara que la rodea */
.orbita { display: flex; flex-direction: column; gap: 10px; }
.orbita-escena {
  position: relative;
  height: 230px;
  border-radius: 14px;
  background: radial-gradient(60% 70% at 50% 45%, #2b261f, #141210);
  perspective: 720px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.orbita-escena:active { cursor: grabbing; }
.orbita-suelo {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 9%;
  height: 30%;
  border: 1.5px dashed rgba(239, 232, 220, 0.28);
  border-radius: 50%;
  z-index: var(--cz, 2);
  pointer-events: none;
}
.orbita-suelo::after {
  content: "";
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 96%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #e3a646;
  box-shadow: 0 0 0 4px rgba(227, 166, 70, 0.22), 0 0 18px rgba(227, 166, 70, 0.6);
}
.orbita-tarjeta {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 40%;
  z-index: 1;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  pointer-events: none;
}
.orbita-tarjeta img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.8); }
.orbita-tarjeta.detras img { filter: brightness(0.5) saturate(0.6); }
.orbita-lectura { margin: 0; font-size: 15px; font-weight: 560; font-variant-numeric: tabular-nums; }
.orbita-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 14px; color: var(--tenue); }
.orbita-controles label { display: inline-flex; align-items: center; gap: 8px; }

/* la instrucción por planos y las sugerencias de @personajes */
.instruccion { position: relative; }
.planos { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; }
.plano { position: relative; padding: 8px 44px 8px 18px; border-bottom: 1px solid var(--linea); }
.plano:last-child { border-bottom: 0; }
.plano-t { display: block; font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.plano textarea { display: block; width: 100%; padding: 2px 0; border: 0; background: transparent; resize: vertical; font-size: 18px; line-height: 1.32; letter-spacing: -0.01em; outline: none; min-height: 52px; }
.plano-quitar { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--tenue); }
.plano-quitar:hover { background: var(--hoja-2); color: var(--texto); }
.plano-quitar svg { width: 15px; height: 15px; }
.instruccion-planos { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 12px; }
.menciones { position: absolute; left: 12px; z-index: 25; min-width: 220px; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--linea); border-radius: 12px; background: var(--hoja); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6); }
.menciones li { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.menciones li[aria-selected="true"], .menciones li:hover { background: var(--hoja-2); }
.menciones img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* voces */
.voces-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.voz { position: relative; }
.voz input { position: absolute; opacity: 0; }
.voz-t { display: flex; flex-direction: column; padding: 8px 40px 8px 12px; border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; }
.voz-t b { font-weight: 650; font-size: 15px; }
.voz-t small { font-size: 12.5px; color: var(--tenue); }
.voz input:checked + .voz-t { border-color: var(--texto); background: var(--hoja-2); }
.voz input:focus-visible + .voz-t { outline: 2.5px solid var(--acento); outline-offset: 2px; }
.voz-oir { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--tenue); }
.voz-oir:hover { background: var(--fondo); color: var(--texto); }
.voz-oir svg { width: 15px; height: 15px; fill: currentColor; }
@media (max-width: 520px) { .voces-lista { grid-template-columns: repeat(2, 1fr); } }

.permiso { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--tenue); cursor: pointer; }
.permiso input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--acento); }

/* personajes */
.kit-resumen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--tenue); }
.kit-resumen img { height: 28px; max-width: 90px; object-fit: contain; border-radius: 4px; background: repeating-conic-gradient(var(--hoja-2) 0 25%, transparent 0 50%) 0 0 / 10px 10px; }
.kit-muestras { display: inline-flex; gap: 3px; }
.kit-muestra { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--linea); }
.kit-logo { display: flex; align-items: center; gap: 10px; }
.kit-logo:empty { display: none; }
.kit-logo img { max-height: 56px; max-width: 160px; object-fit: contain; padding: 6px; border: 1px solid var(--linea); border-radius: 8px; background: repeating-conic-gradient(var(--hoja-2) 0 25%, transparent 0 50%) 0 0 / 12px 12px; }
.kit-colores { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kit-color { position: relative; display: inline-flex; }
.kit-color input[type="color"] { width: 40px; height: 40px; padding: 0; border: 1px solid var(--linea); border-radius: 10px; background: none; cursor: pointer; }
.kit-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.kit-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.kit-color button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--linea); background: var(--hoja); display: grid; place-items: center; }
.kit-color button svg { width: 12px; height: 12px; }
.kit-anadir-color { width: 40px; height: 40px; border: 1px dashed var(--linea); border-radius: 10px; background: transparent; color: var(--tenue); font-size: 22px; line-height: 1; }
.kit-fuentes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kit-fuentes .campo { min-width: 0; }
.kit-fuentes .campo input { min-width: 0; width: 100%; }
.campo textarea { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja-2); font: inherit; font-size: 15px; color: var(--texto); resize: vertical; }
.medidas-logo { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.medidas-logo .segmentos span { min-width: 34px; padding: 4px 8px; }
.personajes { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linea); padding-top: 14px; }
.personajes-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.personajes h2 { margin: 0; font-size: 16px; font-weight: 680; }
.personajes-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.pj { position: relative; }
.pj-usar { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border: 1px solid var(--linea); border-radius: 999px; background: none; font-size: 14px; }
.pj-usar:hover { border-color: var(--tenue); background: var(--hoja-2); }
.pj-usar img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pj-borrar { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: 50%; background: var(--hoja); color: var(--tenue); opacity: 0; transition: opacity 120ms ease; }
.pj:hover .pj-borrar, .pj-borrar:focus-visible { opacity: 1; }
@media (hover: none) { .pj-borrar { opacity: 1; } }
.pj-borrar svg { width: 11px; height: 11px; stroke-width: 2.4; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13.5px; color: var(--tenue); }
.campo input { padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja-2); font-size: 17px; color: var(--texto); }
#panel-pj .refs-lista { margin: 6px 0 10px; }
#panel-pj .permiso { margin: 12px 0 4px; }

/* audio en el muro y en el visor */
.revelado.sonido { aspect-ratio: 16 / 9; background: var(--hoja-2); --onda: color-mix(in srgb, var(--tenue) 70%, transparent); }
.reproductor { display: flex; align-items: center; gap: 12px; }
.sonido .reproductor { position: absolute; left: 0; right: 0; top: 38px; bottom: 54px; padding: 0 14px; z-index: 1; }
.reproducir { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--acento); color: var(--sobre-acento); }
.reproducir svg { width: 18px; height: 18px; fill: currentColor; }
.reproductor .onda { flex: 1; min-width: 0; height: 100%; cursor: pointer; }
.sonido .marca-tipo { background: var(--fondo); color: var(--texto); }
.sonido .pie { opacity: 1; background: none; color: var(--texto); z-index: 1; }
.sonido .pie-acciones button { background: var(--hoja); color: var(--texto); }
.sonido .pie-acciones button:hover { background: var(--fondo); }
.visor-sonido { width: min(760px, 100%); padding: 28px; border-radius: 18px; background: var(--hoja); --onda: color-mix(in srgb, var(--tenue) 70%, transparent); }
.reproductor.grande { height: 200px; gap: 20px; }
.reproductor.grande .reproducir { width: 64px; height: 64px; }
.reproductor.grande .reproducir svg { width: 24px; height: 24px; }

/* objeto 3D: la vista previa en el muro, el modelo vivo en el visor */
.revelado.objeto { background: radial-gradient(70% 70% at 50% 45%, #2b261f, #0e0d0b); }
.revelado.objeto > img { background: none; }
.objeto-vacio { display: grid; place-items: center; aspect-ratio: 1; color: #a49b8c; }
.objeto-vacio svg { width: 56px; height: 56px; stroke-width: 1.2; }
.visor-3d { position: relative; width: 100%; height: calc(100vh - 90px); border-radius: 10px; background: radial-gradient(60% 65% at 50% 42%, #3a3229, #121110); }
.visor-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; max-height: none; box-shadow: none; background: none; }
.visor-3d canvas:active { cursor: grabbing; }
.visor-3d img { display: block; max-width: 100%; max-height: 100%; margin: auto; background: none; box-shadow: none; }
.visor-3d-nota { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 13.5px; color: #b9ad98; pointer-events: none; }
@media (max-width: 899px) { .visor-3d { height: 60vh; } }

@media (prefers-reduced-motion: reduce) { .orbita-tarjeta { transition: none; } }
.visor-sonido canvas { background: none; box-shadow: none; border-radius: 0; max-height: none; }
.muestra.sonido .pie { background: none; color: var(--texto); }
.muestra.sonido .probar { background: var(--texto); color: var(--fondo); }

/* Selección para descargar varios resultados en un ZIP */
.seleccionar { margin-left: auto; padding: 7px 14px; border: 1px solid var(--linea); border-radius: 999px; background: none; color: var(--tenue); font: inherit; font-size: 13.5px; cursor: pointer; }
.seleccionar:hover { color: var(--texto); border-color: var(--texto); }
.sel-barra { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -6px 0 16px; padding: 8px 10px 8px 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--hoja); box-shadow: 0 6px 20px rgb(0 0 0 / 0.12); }
.sel-barra span { margin-right: auto; font-variant-numeric: tabular-nums; }
.sel-barra button { padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; cursor: pointer; }
.sel-zip { border: 1px solid var(--texto); background: var(--texto); color: var(--hoja); }
.sel-zip:disabled { opacity: 0.45; cursor: default; }
.sel-cancelar { border: 1px solid var(--linea); background: none; color: var(--texto); }
.rejilla.seleccionando .revelado { cursor: pointer; }
.rejilla.seleccionando .revelado .pie-acciones { visibility: hidden; }
.rejilla.seleccionando .revelado::after { content: ""; position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%; background: rgb(0 0 0 / 0.25); box-shadow: 0 1px 4px rgb(0 0 0 / 0.4); pointer-events: none; }
.rejilla.seleccionando .revelado.elegido { outline: 3px solid var(--acento); outline-offset: 2px; }
.rejilla.seleccionando .revelado.elegido::after { background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--acento); }
@media (prefers-reduced-motion: no-preference) { .rejilla.seleccionando .revelado::after { transition: background-color 120ms; } }