/* ==========================================================
   CONFIGURACIÓN DE AUDIO + AYUDA DEL TABLERO
   ========================================================== */
.forja-hub-window:has(.forja-audio-settings){
  width:min(640px,92vw);
  height:auto;
  max-height:88vh;
}
.forja-audio-settings{
  display:grid;
  gap:14px;
  color:#eadfca;
}
.forja-audio-settings .forja-hub-panel{
  display:grid;
  gap:12px;
  padding:16px;
}
.forja-audio-note{
  margin:0;
  color:#9f9278;
  font-size:.82rem;
  line-height:1.38;
}
.forja-volume-row{
  display:grid;
  grid-template-columns:140px minmax(0,1fr) 46px;
  gap:12px;
  align-items:center;
  min-height:42px;
  padding:9px 10px;
  border:1px solid rgba(143,27,35,.26);
  background:linear-gradient(180deg,rgba(10,10,10,.88),rgba(0,0,0,.92));
}
.forja-volume-row label{
  color:#f3efea;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.72rem;
  font-weight:900;
}
.forja-volume-row output{
  color:#c9bca0;
  text-align:right;
  font-size:.76rem;
  font-weight:900;
}
.forja-volume-row input[type="range"]{
  width:100%;
  height:20px;
  padding:0;
  border:0;
  background:transparent;
  accent-color:#8f1b23;
  cursor:pointer;
}
.forja-audio-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.forja-audio-actions .forja-small-btn{
  min-width:120px;
}
.forja-hub-window:has(.forja-board-help){
  width:min(980px,94vw);
  height:min(820px,92vh);
  max-height:92vh;
}
.forja-hub-body:has(.forja-board-help){
  overflow:auto;
}
.forja-board-help{
  display:grid;
  gap:12px;
  color:#eadfca;
}
.forja-board-help-intro{
  padding:14px 16px;
  border:1px solid rgba(143,27,35,.34);
  background:radial-gradient(circle at 10% 0%, rgba(143,27,35,.16), transparent 48%), rgba(0,0,0,.30);
  color:#c9bca0;
  line-height:1.42;
}
.forja-board-help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.forja-help-card{
  min-height:118px;
  padding:13px 14px;
  border:1px solid rgba(143,27,35,.28);
  background:linear-gradient(180deg,rgba(12,12,12,.94),rgba(0,0,0,.96));
  box-shadow:inset 0 0 18px rgba(0,0,0,.75);
}
.forja-help-card h3{
  margin:0 0 7px;
  color:#fff;
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:.09em;
}
.forja-help-card p{
  margin:0;
  color:#b8ad98;
  font-size:.80rem;
  line-height:1.36;
}
@media (max-width:760px){
  .forja-board-help-grid{grid-template-columns:1fr;}
  .forja-volume-row{grid-template-columns:1fr;gap:7px;}
  .forja-volume-row output{text-align:left;}
}



    /* Corrección: pestañas de ficha sin recorte ni desborde horizontal */
    .ficha-tabs{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
      gap:5px;
      padding:7px;
      border-bottom:1px solid #242424;
      background:#020202;
      overflow:visible;
      align-items:stretch;
    }
    .ficha-panel.extra .ficha-tabs{
      grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
    }
    .ficha-tab{
      flex:unset;
      min-width:0;
      width:100%;
      min-height:31px;
      height:auto;
      padding:4px 5px;
      color:#c8beb4;
      background:linear-gradient(180deg,#0d0d0d,#030303);
      border:1px solid #242424;
      font-size:.55rem;
      letter-spacing:.055em;
      line-height:1.08;
      white-space:normal;
      overflow:hidden;
      text-overflow:clip;
      display:grid;
      place-items:center;
      text-align:center;
    }
    .ficha-tab.active{
      border-color:#6f1119;
      color:#fff;
      background:linear-gradient(180deg,rgba(111,17,25,.26),rgba(5,5,5,.95));
    }


    /* Corrección W5: la pestaña Formas debe tener campos editables, no quedar vacía */
    #modalMochila .ficha-forms-page{
      gap:8px;
      align-content:start;
    }
    #modalMochila .ficha-form-card{
      display:grid;
      grid-template-columns:92px minmax(0,1fr);
      gap:8px;
      min-height:58px;
      padding:7px;
      border:1px solid #202020;
      background:#030303;
    }
    #modalMochila .ficha-form-title{
      display:grid;
      align-content:start;
      gap:3px;
      color:#fff;
      text-transform:uppercase;
      letter-spacing:.075em;
      font-size:.68rem;
    }
    #modalMochila .ficha-form-title small{
      color:#8f8680;
      font-size:.50rem;
      letter-spacing:.09em;
    }
    #modalMochila .ficha-form-text{
      width:100%;
      min-height:44px;
      max-height:68px;
      resize:vertical;
      padding:6px 7px;
      border:1px solid #242424;
      background:#020202;
      color:#f2eee8;
      font-family:Georgia,"Times New Roman",serif;
      font-size:.70rem;
      line-height:1.25;
      outline:none;
    }



/* ============================================================
   NIGHTBOUND — Ajustes finales integrados
   Integrado en la refactorización para evitar overrides externos.
   ============================================================ */

/* ── Modal ficha/mochila ── */
#modalMochila .ficha-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:5px;
  overflow:visible;
  align-items:stretch;
}
#modalMochila .ficha-tab{
  min-width:0;
  width:auto;
  max-width:none;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
  line-height:1.08;
  font-size:.56rem;
  padding:5px 4px;
}
#modalMochila .ficha-panel.extra .ficha-tabs{
  grid-template-columns:repeat(auto-fit,minmax(68px,1fr));
}
#modalMochila .mochila-empty-space{
  min-height:0;
  overflow:hidden;
}
#modalMochila .mochila-side{
  min-height:0;
  overflow:hidden;
}

/* ── Selector de versión bloqueado para jugador ── */
#modalRulesetControl.ruleset-locked{
  opacity:.58;
  filter:saturate(.55);
}
#modalRulesetSelect:disabled{
  cursor:not-allowed;
  color:#777;
  border-color:#1d1d1d;
  background:linear-gradient(180deg,#080808,#030303);
}

/* ── Botón de editar foto de avatar ── */
.top-admin-avatar-edit,
.modal-avatar-edit{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  outline:0;
  background:transparent;
  color:transparent;
  font-size:0;
  line-height:0;
  box-shadow:none;
  opacity:0;
}
.top-admin-avatar-edit:hover,
.modal-avatar-edit:hover{
  border:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  opacity:0;
}
.top-admin-avatar,
.modal-character-avatar{
  cursor:pointer;
}
.profile-photo-picker-box{
  width:min(860px,92vw);
}
.profile-photo-picker-list{
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
}
.profile-photo-card{
  min-height:148px;
  grid-template-rows:104px auto;
}
.profile-photo-card img{
  height:104px;
}

/* ============================================================
   CORRECCIONES DE FONDOS Y TRANSPARENCIA
   ============================================================ */

/* 1. Barra superior del tablero: quitar overflow:hidden heredado
      que recortaba la imagen de fondo, y asegurar que la imagen
      se vea sin que el gradiente oscuro del grupo la tape. */
.top-test-bar{
  overflow:visible;
  background:
    linear-gradient(180deg,rgba(255,255,255,.028),transparent 46%),
    url("../asset/ui/barra superior.png") center/100% 100% no-repeat;
}

/* 2. page-frame: el fondo negro tapaba "fondo all.png" del body
      en los márgenes. Hacerlo transparente. */
.page-frame{
  background:transparent;
}

/* 3. Botones de dados (flechas +/−) y botón LANZAR:
      el selector genérico body.forja-tablero-mode button les
      ponía un fondo oscuro. Forzar transparencia total. */
body.forja-tablero-mode .tiradas-arrow-btn,
body.forja-tablero-mode .tiradas-arrow-btn:hover,
body.forja-tablero-mode .tiradas-arrow-btn:focus,
body.forja-tablero-mode .tiradas-arrow-btn:active{
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:0;
  filter:none;
}
body.forja-tablero-mode .tiradas-roll-button,
body.forja-tablero-mode .tiradas-roll-button:hover,
body.forja-tablero-mode .tiradas-roll-button:focus,
body.forja-tablero-mode .tiradas-roll-button:active{
  background:transparent;
  border:0;
  box-shadow:none;
  min-height:0;
  filter:none;
  color:transparent;
}
body.forja-tablero-mode .tiradas-control-input{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* 4. Fondo del menú principal: el ::before con mix-blend-mode:multiply
      y opacity .62 oscurecía demasiado la imagen. Se reduce la opacidad. */
#forjaOnlineMenu::before{
  opacity:.32;
}