/*
 * D-UI-DIALOGO — escenas con PNJ (bienvenida de Apenao, cinemática de Flanagan) en los dos estilos
 * (mesa claude/_CLAUDE_D_UI_DIALOGO_MESA.md; marcado en src/ui/dialogo_pnj.ts).
 *   A · Salón dorado — panel con marco de oro: arco con la figura a la izquierda, texto y botones a la derecha.
 *   B · Estandartes  — la figura sobre un estandarte carmesí colgado; el texto en una cinta oscura al lado.
 * El overlay de siempre (style_v0.8.9.css:6915-7383) pesa mucho (`:not()` encadenados, !important en la imagen): aquí
 * todo va con `.tutorial-overlay.dlg` delante. Las fuentes con !important por v2-theme (P-UI-13).
 */

.tutorial-overlay.dlg { z-index: 220; padding: 16px; box-sizing: border-box; }
.tutorial-overlay.dlg .tutorial-overlay-backdrop.dlg-fondo { background: radial-gradient(ellipse at 50% 40%, rgba(60,38,12,.55), rgba(3,2,1,.9) 72%); backdrop-filter: blur(4px); }

/* ── Panel (común) ── */
.tutorial-overlay.dlg .tutorial-overlay-panel.dlg-panel { position: relative; box-sizing: border-box; max-height: 92vh; overflow: visible; padding: 0; gap: 0;
  border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.7); }

/* ── Retrato (común) ── */
.tutorial-overlay.dlg .dlg-retrato { position: relative; min-height: 0; }
.tutorial-overlay.dlg .dlg-figura { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); height: calc(100% - 96px); width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 22px rgba(0,0,0,.7)) !important; pointer-events: none; z-index: 2; }
.tutorial-overlay.dlg img.dlg-figura--imagen { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; margin: 0; padding: 0;
  max-height: none; align-self: auto; justify-self: auto; }
.tutorial-overlay.dlg .dlg-placa { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 16px 16px; text-align: center; display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(0deg, rgba(6,4,2,.95), rgba(6,4,2,.7) 70%, transparent); }
.tutorial-overlay.dlg .dlg-nombre { font-family: 'Cinzel', serif !important; font-weight: 700; font-size: clamp(19px, 1.5vw, 26px); letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3c4, #e0b252 60%, #a8741f); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #000); }
.tutorial-overlay.dlg .dlg-sub { font-family: 'Montserrat', sans-serif !important; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c9b48c; }

/* ── Texto y botones (común) ── */
.tutorial-overlay.dlg .dlg-cinta { display: flex; flex-direction: column; gap: 18px; min-height: 0; box-sizing: border-box; }
.tutorial-overlay.dlg .tutorial-pergamino-text.dlg-texto { position: static; flex: 1; min-height: 4.8em; margin: 0; padding: 0; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  font-family: 'EB Garamond', Garamond, Georgia, serif !important; font-size: clamp(17px, 1.3vw, 22px); font-weight: 500; line-height: 1.6; letter-spacing: .01em;
  color: #efe6d0; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.tutorial-overlay.dlg .tutorial-dialog-actions.dlg-botones { position: static; margin: 0; padding: 0; background: none; border: 0; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.tutorial-overlay.dlg .tutorial-btn.dlg-boton { min-width: 120px; padding: 13px 26px; border-radius: 5px; font-family: 'Cinzel', serif !important; font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transform: none; transition: box-shadow .15s, filter .15s, border-color .15s, color .15s; }
.tutorial-overlay.dlg .tutorial-btn.dlg-boton--rechaza { color: #e9dcc0; background: rgba(10,8,5,.8); border: 1px solid rgba(200,168,96,.5); box-shadow: none; }
.tutorial-overlay.dlg .tutorial-btn.dlg-boton--rechaza:hover, .tutorial-overlay.dlg .tutorial-btn.dlg-boton--rechaza:focus-visible { outline: none; color: #fff3c4; border-color: #ffe7a1;
  box-shadow: 0 0 14px rgba(233,196,106,.3); transform: none; }
.tutorial-overlay.dlg .tutorial-btn.dlg-boton--avanza { color: #1b1406; border: 1px solid #e9c46a; background: linear-gradient(180deg, #ffe7a1 0%, #e0b252 45%, #b07d26 100%);
  box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 18px rgba(233,196,106,.4); }
.tutorial-overlay.dlg .tutorial-btn.dlg-boton--avanza:hover, .tutorial-overlay.dlg .tutorial-btn.dlg-boton--avanza:focus-visible { outline: none; color: #1b1406; filter: brightness(1.08);
  box-shadow: 0 0 0 1px #5a3f10 inset, 0 0 26px rgba(233,196,106,.65); transform: none; }

/* ══ A · Salón dorado ══ */
.tutorial-overlay.dlg[data-estilo="A"] .tutorial-overlay-panel.dlg-panel { width: min(1020px, 96vw); height: min(540px, 82vh); min-height: 0; display: grid;
  grid-template-columns: minmax(250px, 38%) 1fr; align-items: stretch;
  background: linear-gradient(180deg, rgba(22,16,8,.97), rgba(10,8,5,.98)); border: 1px solid var(--ui-linea, #2a3142); }
.tutorial-overlay.dlg[data-estilo="A"] .dlg-retrato { margin: 14px 0 14px 14px; border-radius: 160px 160px 6px 6px; overflow: hidden; border: 1px solid rgba(200,168,96,.45);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.55), 0 0 24px rgba(233,196,106,.15); }
.tutorial-overlay.dlg[data-estilo="A"] .dlg-escena { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,214,140,.22), transparent 60%), url('../assets/backgrounds/fondo.png') center 35% / cover; filter: sepia(.5) brightness(.45) saturate(1.2); }
.tutorial-overlay.dlg[data-estilo="A"] .dlg-cinta { padding: 42px 40px 30px; }
.tutorial-overlay.dlg[data-estilo="A"] .dlg-cinta::before { content: ''; display: block; height: 14px; width: 220px; max-width: 70%; margin: -12px 0 0;
  background: linear-gradient(90deg, #e0b252, #ffe7a1 40%, transparent) left center/100% 1px no-repeat, radial-gradient(circle, #ffe7a1 0 3px, transparent 4px) left center/14px 14px no-repeat; }

/* ══ B · Estandartes ══ */
.tutorial-overlay.dlg[data-estilo="B"] .tutorial-overlay-panel.dlg-panel { width: min(1060px, 96vw); min-height: 0; display: flex; align-items: flex-end; gap: 30px;
  background: none; border: 0; box-shadow: none; }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-retrato { flex: none; width: clamp(240px, 27vw, 340px); height: min(640px, 84vh); margin-top: 14px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.65)); }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-escena { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
  background: linear-gradient(135deg, #fff3c4, #c8963a 30%, #6b4a14 50%, #e9c46a 70%, #fff3c4); background-size: 300% 300%; animation: dlg-oro 6s linear infinite; }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-retrato::before { content: ''; position: absolute; inset: 4px; z-index: 1; clip-path: polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%);
  background: radial-gradient(ellipse at 50% 18%, rgba(255,214,140,.18), transparent 60%), linear-gradient(180deg, #4d1a12 0%, #2c0e09 55%, #180806 100%); }
@keyframes dlg-oro { to { background-position: 300% 0; } }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-figura { bottom: 11%; height: calc(89% - 92px); }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-placa { bottom: auto; top: 22px; background: none; padding: 0 16px; }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-b-barra { position: absolute; left: -16px; right: -16px; top: -12px; height: 20px; border-radius: 10px; z-index: 4;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c); box-shadow: 0 3px 8px rgba(0,0,0,.7); }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-b-barra::before, .tutorial-overlay.dlg[data-estilo="B"] .dlg-b-barra::after { content: ''; position: absolute; top: -5px; width: 30px; height: 30px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, #b07d26 70%); }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-b-barra::before { left: -10px; }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-b-barra::after { right: -10px; }
.tutorial-overlay.dlg[data-estilo="B"] .dlg-cinta { flex: 1; max-height: 56vh; margin-bottom: 10vh; padding: 30px 34px 26px; border-radius: 6px;
  background: linear-gradient(180deg, rgba(14,10,6,.95), rgba(8,6,4,.97)); border: 1px solid rgba(200,168,96,.5);
  box-shadow: 0 0 0 4px rgba(0,0,0,.45), 0 0 30px rgba(233,196,106,.12), 0 20px 40px rgba(0,0,0,.6); }

/* ── Efectos reducidos ── */
body.ui-efectos-reducidos .tutorial-overlay.dlg .dlg-escena { animation: none; }
@media (prefers-reduced-motion: reduce) { .tutorial-overlay.dlg .dlg-escena { animation: none; } }

/* ── Móvil: en columna ── */
@media (max-width: 760px) {
  .tutorial-overlay.dlg { align-items: flex-start; overflow-y: auto; }
  .tutorial-overlay.dlg[data-estilo="A"] .tutorial-overlay-panel.dlg-panel { height: auto; grid-template-columns: 1fr; }
  .tutorial-overlay.dlg[data-estilo="A"] .dlg-retrato { height: 46vh; margin: 12px 12px 0; }
  .tutorial-overlay.dlg[data-estilo="A"] .dlg-cinta { padding: 22px 20px 20px; }
  .tutorial-overlay.dlg[data-estilo="B"] .tutorial-overlay-panel.dlg-panel { flex-direction: column; align-items: center; gap: 18px; }
  .tutorial-overlay.dlg[data-estilo="B"] .dlg-retrato { width: 66vw; height: 46vh; }
  .tutorial-overlay.dlg[data-estilo="B"] .dlg-cinta { width: 100%; margin: 0; max-height: none; }
  .tutorial-overlay.dlg .tutorial-dialog-actions.dlg-botones { justify-content: stretch; }
  .tutorial-overlay.dlg .tutorial-btn.dlg-boton { flex: 1; }
}