/* D-UI-VENTANAS (mesa claude/_CLAUDE_D_UI_VENTANAS_MESA.md) — marco común de las ventanas en los dos estilos.
   El estilo lo pone ui/ventana.js en <html data-estilo-ventanas="A|B">. La colocación (fixed, max-w, max-h, flex) sigue en
   las clases de cada ventana; aquí sólo va el aspecto. */

.ui-ventana { background: rgba(4, 3, 2, 0.82) !important; }

.ui-ventana__panel {
  position: relative;
  color: var(--ui-tinta-1, #e8dcc2);
  border-radius: 6px;
  overflow: hidden;
}
.ui-ventana__cabecera { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.ui-ventana__titulo {
  margin: 0;
  font-family: var(--ui-fuente-titulo, 'Cinzel', serif) !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ui-ventana__pie { border-top: 1px solid rgba(200, 168, 96, 0.28); background: rgba(0, 0, 0, 0.32); }
.ui-ventana__cerrar {
  min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; color: #e9d9b6; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(200, 168, 96, 0.4); cursor: pointer;
}
.ui-ventana__cerrar:hover { color: #fff3c4; border-color: #e9c46a; }
/* bloques internos (la guía de instalación) */
.ui-ventana__bloque { border-radius: 5px; padding: 12px 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(200, 168, 96, 0.28); }
.ui-ventana__bloque h4 { font-family: var(--ui-fuente-titulo, 'Cinzel', serif) !important; letter-spacing: 0.1em; color: #e9c46a !important; }

/* ───────── A · Salón dorado: doble filete dorado, título en oro ───────── */
html:not([data-estilo-ventanas="B"]) .ui-ventana__panel {
  background: linear-gradient(180deg, rgba(24, 18, 10, 0.98), rgba(10, 8, 5, 0.98));
  border: 1px solid rgba(200, 168, 96, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(200, 150, 58, 0.12);
}
html:not([data-estilo-ventanas="B"]) .ui-ventana__panel::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid rgba(200, 168, 96, 0.22); border-radius: 4px; pointer-events: none; z-index: 0;
}
html:not([data-estilo-ventanas="B"]) .ui-ventana__panel > * { position: relative; z-index: 1; }
html:not([data-estilo-ventanas="B"]) .ui-ventana__cabecera {
  background: linear-gradient(180deg, rgba(200, 150, 58, 0.1), transparent);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(233, 196, 106, 0.7), transparent) 1;
}
html:not([data-estilo-ventanas="B"]) .ui-ventana__titulo { color: #e9c46a !important; text-shadow: 0 1px 0 #000, 0 0 14px rgba(233, 196, 106, 0.25); }

/* ───────── B · Estandartes: banda carmesí, título en banderín ───────── */
html[data-estilo-ventanas="B"] .ui-ventana__panel {
  background: linear-gradient(180deg, rgba(14, 10, 6, 0.98), rgba(8, 6, 4, 0.98));
  border: 1px solid rgba(200, 168, 96, 0.4);
  border-top: 4px solid #6b2418;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.75);
}
html[data-estilo-ventanas="B"] .ui-ventana__cabecera { background: transparent; padding-left: 0; }
html[data-estilo-ventanas="B"] .ui-ventana__titulo {
  padding: 7px 30px 8px 18px; color: #fff3c4 !important;
  background: linear-gradient(180deg, #6b2418, #3a120c);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 1px rgba(233, 196, 106, 0.4);
}
html[data-estilo-ventanas="B"] .ui-ventana__cerrar { border-radius: 0; }

/* ───────── D-UI-VENTANAS-2: cabecera centrada, título de derrota, botón principal ───────── */
.ui-ventana__cabecera--centro { justify-content: center; text-align: center; }
html:not([data-estilo-ventanas="B"]) .ui-ventana__titulo--derrota { color: #d06a5a !important; text-shadow: 0 1px 0 #000, 0 0 14px rgba(208, 106, 90, 0.3); }
.ui-ventana__accion {
  padding: 11px 30px; border-radius: 5px; cursor: pointer;
  font-family: var(--ui-fuente-titulo, 'Cinzel', serif) !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 14px;
}
html:not([data-estilo-ventanas="B"]) .ui-ventana__accion { color: #1b1406; border: 1px solid #ffe7a1; background: linear-gradient(180deg, #ffe7a1, #c8963a); box-shadow: 0 0 14px rgba(200, 150, 58, 0.35); }
html[data-estilo-ventanas="B"] .ui-ventana__accion { color: #fff3c4; border: 1px solid #e9c46a; background: linear-gradient(180deg, #9a2c1c, #5a1810); border-radius: 0; }
.ui-ventana__accion:hover { filter: brightness(1.12); }
/* B: el título centrado es una cinta con muesca a los dos lados */
html[data-estilo-ventanas="B"] .ui-ventana__cabecera--centro { padding-left: 18px; }
html[data-estilo-ventanas="B"] .ui-ventana__cabecera--centro .ui-ventana__titulo {
  padding: 7px 30px 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
html[data-estilo-ventanas="B"] .ui-ventana__titulo--derrota { color: #ffd9cf !important; }