/* Banner — el vestido. Herramienta, no juego: todo tiene que estar a la vista
   y a un clic, sin pantallas de bienvenida ni nada que haya que descubrir. */

.bn-intro { padding: clamp(2rem, 5vw, 3.2rem) 0 .8rem; }
.bn-intro .lead { max-width: 56ch; }
.bn-seccion { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }

.bn {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--surface-0, #fff);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .10);
}

/* --------------------------------------------------------- las pestañas -- */
.bn-tabs { display: flex; flex-wrap: wrap; gap: .2rem; padding: .5rem .6rem 0;
           background: var(--surface-1); border-bottom: 1px solid var(--line); }
.bn-tab {
  border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
  padding: .6rem 1rem; border-radius: 10px 10px 0 0; color: var(--muted);
}
.bn-tab:hover { background: rgba(0, 0, 0, .05); }
.bn-tab.es-activa { background: var(--surface-0, #fff); color: var(--text);
                    box-shadow: 0 -1px 0 var(--line) inset; }
.bn-tab:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }

.bn-panel { padding: clamp(1rem, 3vw, 1.6rem); }
.bn-panel[hidden] { display: none; }

.bn-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
           gap: clamp(1rem, 3vw, 1.8rem); align-items: start; }
@media (max-width: 720px) { .bn-fila { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------- los lienzos -- */
.bn-tela {
  width: 100%; max-width: 512px; aspect-ratio: 1; display: block; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 12px; touch-action: none;
  /* el damero de atrás: así se ve qué es transparente y qué es blanco */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eceff3 25%, transparent 25%, transparent 75%, #eceff3 75%),
    linear-gradient(45deg, #eceff3 25%, transparent 25%, transparent 75%, #eceff3 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
  cursor: crosshair;
}
.bn-tela-3d { cursor: grab; background: #0c0f14; aspect-ratio: 1; max-width: 480px; }
.bn-tela-3d:active { cursor: grabbing; }

/* --------------------------------------------------------- los controles -- */
.bn-caja { display: grid; gap: .9rem; }
.bn-grupo { display: grid; gap: .35rem; }
.bn-grupo > span, .bn-grupo > label > span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700;
}
.bn-colores { display: flex; flex-wrap: wrap; gap: .35rem; }
.bn-color {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; padding: 0;
  border: 2px solid var(--line);
}
.bn-color.es-elegido { border-color: var(--text); box-shadow: 0 0 0 2px rgba(0, 0, 0, .18); }
.bn-color:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.bn-btns { display: flex; flex-wrap: wrap; gap: .45rem; }
.bn-btn {
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .85rem;
  background: var(--surface-1); font: inherit; cursor: pointer; color: var(--text);
}
.bn-btn:hover { background: var(--surface-2); }
.bn-btn[disabled] { opacity: .45; cursor: default; }
.bn-btn.es-elegido { background: var(--brand); color: #fff; border-color: var(--brand); }
.bn-btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.bn input[type="range"] { width: 100%; }
.bn input[type="color"] { width: 46px; height: 34px; padding: 0; border: 1px solid var(--line);
                          border-radius: 8px; background: none; cursor: pointer; }
.bn select { font: inherit; padding: .45rem .6rem; border-radius: 9px;
             border: 1px solid var(--line); background: var(--surface-1); color: var(--text); }
.bn-num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }

/* ------------------------------------------------------------ la bandera -- */
.bn-bandera { display: grid; gap: .6rem; justify-items: center; }
.bn-palo { width: 12px; height: 26px; background: #6b4f2e; border-radius: 2px; }
.bn-tela-bandera {
  image-rendering: pixelated; width: 180px; height: 360px;
  border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
}
.bn-parecido { font-size: 1.6rem; font-weight: 800; }
.bn-pasos { display: grid; gap: .55rem; margin: 0; padding-left: 1.3rem; }
.bn-pasos li { line-height: 1.55; }
.bn-mc {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  color: var(--muted); background: var(--surface-1); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 .35em;
}
.bn-aviso {
  background: var(--surface-1); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 8px; padding: .7rem .9rem; font-size: .88rem; color: var(--muted);
  line-height: 1.55;
}
.bn-pensando { font-size: .85rem; color: var(--muted); }

/* --------------------------------------------------- dibujar por texto -- */
.bn-texto {
  font: inherit; padding: .6rem .75rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-1); color: var(--text);
  width: 100%;
}
.bn-btn-fuerte { background: var(--brand); color: #fff; border-color: var(--brand); }
.bn-btn-fuerte:hover { background: var(--brand-600, #0d7ea0); }
.bn-lectura {
  margin: .7rem 0 0; font-size: .86rem; line-height: 1.6; color: var(--muted);
  text-align: center; min-height: 2.6em;
}
.bn-lectura b { color: var(--text); }
.bn-lectura .bn-nose { color: #a8443c; }
.bn-pinta {
  display: inline-block; width: .8em; height: .8em; border-radius: 50%;
  background: var(--c); border: 1px solid rgba(0, 0, 0, .25);
  margin-right: .25em; vertical-align: -.05em;
}
.bn-vocab { display: flex; flex-wrap: wrap; gap: .3rem; }
.bn-voz {
  font-size: .76rem; padding: .18rem .5rem; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer;
}
.bn-voz:hover { background: var(--surface-2); color: var(--text); }