/* Selector de estilo en tarjetas (app/selector-estilo.js): /crear/ y el paso «Estilo» del asistente */
.sel-grupo { background: #fff; border: 1px solid var(--linea, #e2d5bd); border-radius: 16px; padding: 16px 18px 18px; margin-bottom: 14px; }
.sel-grupo h3 { text-align: left; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0 0 .1em; color: var(--titulo, var(--vino-osc, #4f1c26)); }
.sel-grupo > p { margin: 0 0 .8em; color: var(--texto-suave, var(--suave, #75665d)); font-size: .9rem; }
.sel-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sel-op { position: relative; text-align: left; border: 2px solid var(--linea, #e2d5bd); background: #fff; border-radius: 12px; padding: .6em .75em; cursor: pointer; font: inherit; color: var(--texto, var(--tinta, #2e2522)); transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: .15em; }
.sel-op:hover { border-color: var(--acento, var(--albero, #c69c78)); }
.sel-op b { font-weight: 600; font-size: .95rem; }
.sel-op.activa { border-color: var(--primario, var(--vino, #7a2e3a)); background: #fbf3ec; box-shadow: 0 0 0 2px rgba(122, 46, 58, .2); }
.sel-op:focus-visible { outline: 3px solid var(--albero, #c69c78); outline-offset: 2px; }
.sel-muestra { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin-bottom: .3em; }
.sel-muestra i { flex: 1; }
/* Letras (paso «Estilo» del asistente): cada tarjeta escrita con su letra */
.sel-letras .sel-opciones { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.letra-op { display: flex; flex-direction: column; gap: .15em; text-align: center; align-items: center; justify-content: center; min-height: 84px; }
.letra-op__muestra { font-size: 1.45rem; line-height: 1.2; color: var(--titulo, var(--vino-osc, #4f1c26)); max-width: 100%; overflow-wrap: anywhere; }
.letra-op b { font-size: .75rem; font-weight: 500; color: var(--texto-suave, var(--suave, #75665d)); }
@media (max-width: 520px) { .sel-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sel-grupo { padding: 12px; } }

/* P65: las experiencias, aparte (son un atajo); las cuatro piezas, en su panel; cada tarjeta solo con el título */
.sel-grupo--atajo { background: #fbf3ec; border: 2px dashed var(--albero, #c69c78); margin-bottom: 22px; }
.sel-grupo--atajo .sel-op { background: #fffdf9; }
.sel-piezas { border-top: 1px solid var(--linea, #e2d5bd); padding-top: 14px; }
.sel-piezas__titulo { margin: 0 0 10px; font: 600 .78rem var(--sans, system-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave, var(--suave, #75665d)); }
.sel-elegida { margin: .7em 0 0; font-size: .85rem; line-height: 1.4; color: var(--texto-suave, var(--suave, #75665d)); }
.sel-elegida:empty { display: none; }
.sel-elegida b { color: var(--texto, var(--tinta, #2e2522)); font-weight: 600; }
/* La descripción, al pasar por encima (o con el teclado); en pantallas táctiles, solo la de la elegida, debajo */
.sel-desc { display: none; }
@media (hover: hover) {
  .sel-op:hover .sel-desc, .sel-op:focus-visible .sel-desc {
    display: block; position: absolute; z-index: 30; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
    width: max-content; max-width: 240px; padding: .5em .7em; border-radius: 8px; background: #2e2522; color: #fff;
    font-size: .78rem; font-weight: 400; line-height: 1.35; text-align: left; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); pointer-events: none;
  }
}