/* Dark Souls II: Scholar of the First Sin — planificador de personaje. */
.ds2-plan-page {
  --crim-rgb: 137, 125, 99;
  --crim-l: #cbc5a2;
  --crim-d: #5f5644;
  --muro-text: #aaa99f;
  --muro-white: #f0ecdf;
  --ds2-plan-line: rgba(191, 184, 147, .17);
  --ds2-plan-panel: rgba(15, 18, 21, .96);
  --ds2-plan-muted: #a7aaa7;
  --ds2-plan-text: #e4e1d8;
  --ds2-plan-gold: #d1bd83;
  --ds2-plan-rust: #897d63;
}
.ds2-plan-page .cover::before {
  background:
    radial-gradient(ellipse 58% 82% at 50% -14%, rgba(203, 197, 162, .12), transparent 67%),
    radial-gradient(ellipse 42% 56% at 50% 0%, rgba(102, 106, 106, .16), transparent 72%);
}
.ds2-plan-page .cover .sm { color: #cbc5a2; }
.ds2-plan-page .cover h1 em { -webkit-text-stroke-color: rgba(203, 197, 162, .88); }
.ds2-plan-page .cover .orn i { background: #897d63; }
.ds2-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(290px, .78fr);
  align-items: start;
  gap: 18px;
  width: min(1360px, calc(100% - 40px));
  margin: 20px auto 38px;
}
.ds2-plan-main, .ds2-plan-side { display: grid; gap: 16px; min-width: 0; }
.ds2-plan-side { position: sticky; top: 90px; }
.ds2-plan-equipment, .ds2-plan-card {
  min-width: 0;
  border: 1px solid var(--ds2-plan-line);
  background: linear-gradient(145deg, rgba(22, 25, 28, .97), var(--ds2-plan-panel));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2);
}
.ds2-plan-equipment-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 21px;
  border-bottom: 1px solid var(--ds2-plan-line);
  background: linear-gradient(105deg, rgba(164, 126, 78, .11), rgba(203, 197, 162, .035));
}
.ds2-plan-equipment-head > div { min-width: 0; flex: 1; }
.ds2-plan-equipment-head > div > span, .ds2-plan-card-head > span {
  color: var(--ds2-plan-gold);
  font: 700 9px/1.6 Cinzel, serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.ds2-plan-equipment-head h2, .ds2-plan-card-head h2 {
  margin: 3px 0 0;
  color: var(--ds2-plan-text);
  font: 700 clamp(19px, 2vw, 25px)/1.3 Cinzel, serif;
}
.ds2-plan-equipment-head p { margin: 4px 0 0; color: var(--ds2-plan-muted); font: 400 11px/1.6 Cinzel, serif; }
.ds2-plan-crest { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(209, 189, 131, .32); color: var(--ds2-plan-gold); font-size: 17px; }
.ds2-plan-board { display: grid; gap: 12px; padding: 13px; }
.ds2-plan-group { min-width: 0; border: 1px solid rgba(191, 184, 147, .13); background: rgba(4, 6, 8, .31); }
.ds2-plan-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px 11px;
  border-bottom: 1px solid rgba(191, 184, 147, .1);
}
.ds2-plan-group-head > div > span { color: #989b97; font: 700 8px/1.5 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; }
.ds2-plan-group-head h3 { margin: 2px 0 0; color: #e6e2d8; font: 700 15px/1.4 Cinzel, serif; }
.ds2-plan-group-head > b, .ds2-plan-magic-count { color: var(--ds2-plan-gold); font: 700 10px/1.5 Cinzel, serif; letter-spacing: .06em; text-align: right; }
.ds2-plan-hands-wrap, .ds2-plan-ammo-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 13px; }
.ds2-plan-hand, .ds2-plan-ammo-wrap > section { min-width: 0; }
.ds2-plan-hand h4, .ds2-plan-ammo-wrap h4 {
  margin: 0 0 8px;
  color: #c5b890;
  font: 700 9px/1.5 Cinzel, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ds2-plan-slot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 13px; }
.ds2-plan-hands-wrap .ds2-plan-slot-grid, .ds2-plan-ammo-wrap .ds2-plan-slot-grid { padding: 0; }
.ds2-plan-slot {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 74px;
  border: 1px solid rgba(191, 184, 147, .15);
  background: linear-gradient(145deg, rgba(33, 36, 38, .8), rgba(8, 10, 12, .8));
}
.ds2-plan-slot.is-filled { border-color: rgba(209, 189, 131, .31); background: linear-gradient(145deg, rgba(126, 104, 61, .14), rgba(8, 10, 12, .82)); }
.ds2-plan-slot-open {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 9px 24px 9px 9px;
  border: 0;
  background: transparent;
  color: var(--ds2-plan-text);
  text-align: left;
  cursor: pointer;
}
.ds2-plan-slot-open:hover { background: rgba(209, 189, 131, .07); }
.ds2-plan-slot-open:focus-visible, .ds2-plan-slot-clear:focus-visible, .ds2-plan-tabs button:focus-visible { outline: 2px solid var(--ds2-plan-gold); outline-offset: 2px; }
.ds2-plan-slot-number { position: absolute; top: 5px; left: 7px; color: rgba(209, 189, 131, .67); font: 700 8px/1 Cinzel, serif; }
.ds2-plan-slot-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; margin-left: 4px; border: 1px solid rgba(209, 189, 131, .12); background: rgba(0, 0, 0, .2); color: #a59a79; font: 700 12px/1 Cinzel, serif; }
.ds2-plan-slot-icon img { display: block; width: 30px; height: 30px; object-fit: contain; }
.ds2-plan-slot-label { display: grid; gap: 4px; min-width: 0; }
.ds2-plan-slot-label strong { overflow: hidden; color: #dedbd2; font: 600 9px/1.5 Cinzel, serif; text-overflow: ellipsis; }
.ds2-plan-slot-label small { color: #9b9d98; font: 400 8px/1.45 Cinzel, serif; }
.ds2-plan-slot-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(191, 184, 147, .13);
  background: rgba(0, 0, 0, .35);
  color: #bdb9aa;
  font: 12px/1 Arial, sans-serif;
  cursor: pointer;
}
.ds2-plan-slot-clear:hover { border-color: rgba(164, 126, 78, .55); color: #d6c49f; }
.ds2-plan-twohand, .ds2-plan-covenant {
  display: grid;
  grid-template-columns: minmax(145px, .55fr) minmax(180px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 13px 13px;
  color: #c9c1a5;
  font: 700 9px/1.5 Cinzel, serif;
  letter-spacing: .04em;
}
.ds2-plan-armor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds2-plan-ring-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds2-plan-ammo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds2-plan-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds2-plan-spell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds2-plan-spell-add { display: grid; place-items: center; min-height: 69px; border: 1px dashed rgba(209, 189, 131, .27); background: rgba(209, 189, 131, .025); color: #c7b880; font: 700 9px/1.6 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ds2-plan-spell-add:hover:not(:disabled) { background: rgba(209, 189, 131, .08); }
.ds2-plan-spell-add:disabled { opacity: .48; cursor: not-allowed; }
.ds2-plan-spell-empty { grid-column: 1 / -1; margin: 0; padding: 3px 1px 9px; color: #9b9d98; font: 400 10px/1.7 Cinzel, serif; }
.ds2-plan-covenant { padding-top: 13px; }
.ds2-plan-select, .ds2-plan-stat input, .ds2-plan-search input {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid rgba(209, 189, 131, .22);
  border-radius: 0;
  background: #0b0d0f;
  color: var(--ds2-plan-text);
  font: 400 10px/1.5 Cinzel, serif;
}
.ds2-plan-select:focus, .ds2-plan-stat input:focus, .ds2-plan-search input:focus { outline: 2px solid rgba(209, 189, 131, .48); outline-offset: 1px; }
.ds2-plan-page .ds2-plan-select { color-scheme: dark; accent-color: var(--ds2-plan-gold); }
.ds2-plan-page .ds2-plan-select option,
.ds2-plan-page .ds2-plan-select optgroup {
  background-color: #111416;
  color: #e4e1d8;
  font-family: Cinzel, serif;
}
.ds2-plan-page .ds2-plan-select option:checked { background-color: #756746; color: #fff3cd; }
.ds2-plan-tabs { display: flex; border-bottom: 1px solid var(--ds2-plan-line); }
.ds2-plan-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #a8a79e;
  font: 700 9px/1.5 Cinzel, serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.ds2-plan-tabs button[aria-selected="true"] { border-bottom-color: var(--ds2-plan-gold); color: #e0d5ad; }
.ds2-plan-card-head { padding: 16px 19px 13px; border-bottom: 1px solid var(--ds2-plan-line); }
.ds2-plan-card-head h2 { font-size: 19px; }
.ds2-plan-note { margin: 0; padding: 13px 19px 0; color: #b1b2ac; font: 400 10px/1.8 Cinzel, serif; }
.ds2-plan-field { display: grid; gap: 6px; color: #cec5a9; font: 700 9px/1.5 Cinzel, serif; letter-spacing: .05em; }
.ds2-plan-class-field { margin: 13px 19px 0; }
.ds2-plan-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 14px 19px 17px; }
.ds2-plan-stat { display: grid; gap: 4px; min-width: 0; color: #b9bab4; font: 600 8px/1.5 Cinzel, serif; }
.ds2-plan-stat input { min-height: 35px; padding: 6px 8px; font-size: 10px; }
.ds2-plan-small-note { margin: 0; padding: 0 19px 16px; color: #92958f; font: 400 9px/1.75 Cinzel, serif; }
.ds2-plan-derived { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 13px; }
.ds2-plan-derived-tile { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 67px; padding: 9px; border: 1px solid rgba(191, 184, 147, .12); background: rgba(0, 0, 0, .24); }
.ds2-plan-derived-tile > span { color: #a6a69d; font: 700 8px/1.5 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; }
.ds2-plan-derived-tile > b { color: #e8e3d8; font: 700 14px/1.4 Cinzel, serif; overflow-wrap: anywhere; }
.ds2-plan-derived-tile > small { color: #8f928c; font: 400 8px/1.5 Cinzel, serif; }
.ds2-plan-load { grid-column: 1 / -1; }
.ds2-plan-load-track { height: 5px; margin-top: 3px; background: rgba(191, 184, 147, .15); }
.ds2-plan-load-track i { display: block; height: 100%; background: linear-gradient(90deg, #666a6a, #897d63, #cbc5a2); transition: width .2s ease; }
.ds2-plan-warnings { display: grid; gap: 8px; padding: 0 13px 13px; }
.ds2-plan-warning { padding: 10px 11px; border-left: 2px solid var(--ds2-plan-rust); background: rgba(137, 125, 99, .09); color: #d0caba; font: 400 9px/1.7 Cinzel, serif; }
.ds2-plan-warning strong { color: #e4d6ad; }
.ds2-plan-warning--ok { border-color: #8a907d; background: rgba(102, 106, 106, .09); color: #c2c5b9; }
.ds2-plan-reset { min-height: 38px; margin: 0 13px 14px; padding: 8px 12px; border: 1px solid rgba(209, 189, 131, .28); background: transparent; color: #d1bd83; font: 700 9px/1.5 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ds2-plan-reset:hover { background: rgba(209, 189, 131, .08); }
.ds2-plan-reset--top { flex: 0 0 auto; margin: 0; }
.ds2-plan-status, .ds2-plan-error { width: min(1360px, calc(100% - 40px)); margin: 16px auto; padding: 12px 15px; border: 1px solid rgba(209, 189, 131, .2); color: #cfc5a7; font: 400 10px/1.7 Cinzel, serif; }
.ds2-plan-status[hidden] { display: none; }
.ds2-plan-status.is-error, .ds2-plan-error { border-color: rgba(164, 126, 78, .4); color: #d6c49f; }
.ds2-plan-picker { width: min(1040px, calc(100vw - 28px)); max-width: none; max-height: min(88vh, 850px); padding: 0; overflow: hidden; border: 1px solid rgba(209, 189, 131, .29); background: #0b0d0f; color: var(--ds2-plan-text); box-shadow: 0 28px 100px rgba(0, 0, 0, .76); }
.ds2-plan-picker::backdrop { background: rgba(0, 0, 0, .76); backdrop-filter: blur(4px); }
.ds2-plan-picker-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; }
.ds2-plan-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 15px 19px; border-bottom: 1px solid var(--ds2-plan-line); background: linear-gradient(100deg, rgba(164, 126, 78, .12), transparent); }
.ds2-plan-picker-head span { color: var(--ds2-plan-gold); font: 700 8px/1.5 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; }
.ds2-plan-picker-head h2 { margin: 3px 0 0; color: #e7e2d8; font: 700 18px/1.4 Cinzel, serif; }
.ds2-plan-picker-close { width: 35px; height: 35px; border: 1px solid var(--ds2-plan-line); background: transparent; color: #d3cec0; font: 22px/1 Arial, sans-serif; cursor: pointer; }
.ds2-plan-picker-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); min-height: 0; overflow: hidden; }
.ds2-plan-picker-library { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; border-right: 1px solid var(--ds2-plan-line); }
.ds2-plan-picker-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .55fr); gap: 8px; padding: 12px; border-bottom: 1px solid rgba(191, 184, 147, .11); }
.ds2-plan-picker-count { grid-column: 1 / -1; color: #9e9d94; font: 700 8px/1.4 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; }
.ds2-plan-search input { min-height: 36px; }
.ds2-plan-picker-items { display: grid; align-content: start; gap: 5px; min-height: 0; padding: 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: #6c5e43 transparent; }
.ds2-plan-picker-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 9px; border: 1px solid rgba(191, 184, 147, .11); background: rgba(255, 255, 255, .018); color: #d8d5cc; text-align: left; font: 500 9px/1.5 Cinzel, serif; cursor: pointer; }
.ds2-plan-picker-item:hover, .ds2-plan-picker-item.is-selected { border-color: rgba(209, 189, 131, .45); background: rgba(209, 189, 131, .07); }
.ds2-plan-picker-item:disabled { opacity: .4; cursor: not-allowed; }
.ds2-plan-picker-empty { margin: 7px; color: #a5a399; font: 400 9px/1.7 Cinzel, serif; }
.ds2-plan-picker-item img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.ds2-plan-picker-item span { min-width: 0; overflow-wrap: anywhere; }
.ds2-plan-picker-details { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 18px; overflow: auto; }
.ds2-plan-picker-details > img { width: 76px; height: 76px; object-fit: contain; padding: 6px; border: 1px solid rgba(209, 189, 131, .15); background: rgba(0, 0, 0, .2); }
.ds2-plan-picker-details h3 { margin: 0; color: #e5dec9; font: 700 15px/1.5 Cinzel, serif; }
.ds2-plan-picker-details > p { margin: 0; color: #aaaca5; font: 400 9px/1.8 Cinzel, serif; }
.ds2-plan-picker-details dl { display: grid; gap: 0; margin: 0; }
.ds2-plan-picker-details dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(191, 184, 147, .1); font: 400 8px/1.5 Cinzel, serif; }
.ds2-plan-picker-details dt { color: #9f9e93; }
.ds2-plan-picker-details dd { margin: 0; color: #e4d5aa; text-align: right; }
.ds2-plan-picker-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 15px; border-top: 1px solid var(--ds2-plan-line); background: rgba(0, 0, 0, .24); }
.ds2-plan-picker-foot > span { color: #96968e; font: 400 8px/1.5 Cinzel, serif; }
.ds2-plan-picker-foot > div { display: flex; gap: 8px; }
.ds2-plan-picker-remove, .ds2-plan-picker-equip { min-height: 35px; padding: 7px 12px; border: 1px solid rgba(209, 189, 131, .24); background: transparent; color: #c9c1a5; font: 700 8px/1.5 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.ds2-plan-picker-equip { border-color: rgba(209, 189, 131, .45); background: rgba(209, 189, 131, .12); color: #ebdba9; }
.ds2-plan-picker-equip:disabled { opacity: .4; cursor: not-allowed; }
.ds2-plan-picker-remove:hover, .ds2-plan-picker-equip:hover:not(:disabled) { background: rgba(209, 189, 131, .17); }
@media (max-width: 980px) {
  .ds2-plan-layout { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
  .ds2-plan-side { position: static; }
}
@media (max-width: 740px) {
  .ds2-plan-layout { grid-template-columns: minmax(0, 1fr); width: min(100% - 24px, 650px); }
  .ds2-plan-status, .ds2-plan-error { width: calc(100% - 24px); }
  .ds2-plan-board { padding: 9px; }
  .ds2-plan-equipment-head { padding: 14px; }
  .ds2-plan-crest { display: none; }
  .ds2-plan-group-head { padding: 11px 12px 9px; }
  .ds2-plan-hands-wrap, .ds2-plan-ammo-wrap { gap: 8px; padding: 10px; }
  .ds2-plan-slot-grid { gap: 6px; padding: 10px; }
  .ds2-plan-slot { min-height: 68px; }
  .ds2-plan-slot-open { gap: 6px; padding: 8px 21px 8px 6px; }
  .ds2-plan-slot-icon { width: 30px; height: 30px; flex-basis: 30px; margin-left: 2px; }
  .ds2-plan-slot-icon img { width: 25px; height: 25px; }
  .ds2-plan-slot-label strong { font-size: 8px; }
  .ds2-plan-twohand, .ds2-plan-covenant { padding-right: 10px; padding-left: 10px; }
  .ds2-plan-picker { width: calc(100vw - 16px); max-height: 92vh; }
  .ds2-plan-picker-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ds2-plan-picker-library { border-right: 0; border-bottom: 1px solid var(--ds2-plan-line); }
  .ds2-plan-picker-items { max-height: 38vh; }
  .ds2-plan-picker-details { grid-template-columns: 54px minmax(0, 1fr); gap: 7px 11px; padding: 10px 13px; }
  .ds2-plan-picker-details > img { grid-row: span 3; width: 54px; height: 54px; }
  .ds2-plan-picker-details dl { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .ds2-plan-picker-details > p { font-size: 8px; }
  .ds2-plan-picker-foot { align-items: flex-end; }
  .ds2-plan-picker-foot > span { max-width: 120px; }
}
@media (max-width: 430px) {
  .ds2-plan-hands-wrap, .ds2-plan-ammo-wrap { grid-template-columns: minmax(0, 1fr); }
  .ds2-plan-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds2-plan-armor-grid, .ds2-plan-ring-grid, .ds2-plan-ammo-grid, .ds2-plan-quick-grid, .ds2-plan-spell-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds2-plan-picker-tools { grid-template-columns: minmax(0, 1fr); }
  .ds2-plan-picker-count { grid-column: auto; }
  .ds2-plan-picker-foot { flex-direction: column; align-items: stretch; }
  .ds2-plan-picker-foot > span { max-width: none; }
  .ds2-plan-picker-foot > div { justify-content: flex-end; }
}
/* Reparte mejor los espacios de mano y hace legible el detalle del selector. */
.ds2-plan-hands-wrap .ds2-plan-slot-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 174px), 1fr));
}
.ds2-plan-slot { min-height: 88px; }
.ds2-plan-slot-open {
  align-items: center;
  gap: 10px;
  padding: 20px 26px 10px 10px;
}
.ds2-plan-slot-icon { width: 40px; height: 40px; flex-basis: 40px; margin-left: 0; }
.ds2-plan-slot-icon img { width: 34px; height: 34px; }
.ds2-plan-slot-label { gap: 3px; }
.ds2-plan-slot-label strong {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.4;
}
.ds2-plan-slot-label small { overflow-wrap: anywhere; line-height: 1.35; }
.ds2-plan-picker-description { white-space: pre-line; }
.ds2-plan-detail-panel { min-width: 0; padding-top: 5px; border-top: 1px solid rgba(191, 184, 147, .13); }
.ds2-plan-detail-panel h4 { margin: 0 0 7px; color: var(--ds2-plan-gold); font: 700 9px/1.5 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
.ds2-plan-detail-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ds2-plan-detail-table th, .ds2-plan-detail-table td { padding: 5px 4px; border-bottom: 1px solid rgba(191, 184, 147, .08); font: 400 8px/1.45 Cinzel, serif; overflow-wrap: anywhere; }
.ds2-plan-detail-table thead th { color: #cfc4a3; font-weight: 700; text-align: right; }
.ds2-plan-detail-table thead th:first-child, .ds2-plan-detail-table tbody th { width: 38%; text-align: left; }
.ds2-plan-detail-table tbody th { color: #9f9e93; font-weight: 600; }
.ds2-plan-detail-table td { color: #e4d5aa; text-align: right; }
.ds2-plan-detail-list { display: grid; gap: 0; margin: 0; }
.ds2-plan-detail-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(191, 184, 147, .08); font: 400 8px/1.45 Cinzel, serif; }
.ds2-plan-detail-list dt { color: #9f9e93; }
.ds2-plan-detail-list dd { margin: 0; color: #e4d5aa; text-align: right; }

/* El puntero global no puede atravesar los diálogos en la capa superior del navegador. */
@media (pointer: fine) {
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open],
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open] * { cursor: auto !important; }
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open] button:not(:disabled),
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open] select { cursor: pointer !important; }
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open] input[type="search"] { cursor: text !important; }
  html.sg-custom-cursor:not(.sg-low-power) .ds2-plan-picker[open] button:disabled { cursor: not-allowed !important; }
}

/* Panel lateral y selectores con desplazamiento propio y barra de la paleta DS2. */
.ds2-plan-side {
  position: sticky;
  top: 88px;
  align-self: start;
  align-content: start;
  max-height: calc(100vh - 104px);
  max-height: calc(100dvh - 104px);
  padding-right: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(209, 189, 131, .58) rgba(0, 0, 0, .2);
}
.ds2-plan-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #0c0e10;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}
.ds2-plan-side::-webkit-scrollbar,
.ds2-plan-picker-items::-webkit-scrollbar,
.ds2-plan-picker-details::-webkit-scrollbar { width: 8px; height: 8px; }
.ds2-plan-side::-webkit-scrollbar-track,
.ds2-plan-picker-items::-webkit-scrollbar-track,
.ds2-plan-picker-details::-webkit-scrollbar-track { background: rgba(0, 0, 0, .24); }
.ds2-plan-side::-webkit-scrollbar-thumb,
.ds2-plan-picker-items::-webkit-scrollbar-thumb,
.ds2-plan-picker-details::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0, 0, 0, .24);
  border-radius: 8px;
  background: linear-gradient(180deg, #b6a16a, #78684a);
}
.ds2-plan-side::-webkit-scrollbar-thumb:hover,
.ds2-plan-picker-items::-webkit-scrollbar-thumb:hover,
.ds2-plan-picker-details::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #d1bd83, #9a8052); }
.ds2-plan-picker {
  height: min(88vh, 850px);
  height: min(88dvh, 850px);
  scrollbar-width: thin;
  scrollbar-color: rgba(209, 189, 131, .58) rgba(0, 0, 0, .2);
}
.ds2-plan-picker-frame { height: 100%; min-height: 0; }
.ds2-plan-picker-body,
.ds2-plan-picker-library,
.ds2-plan-picker-details { min-height: 0; }
.ds2-plan-picker-items,
.ds2-plan-picker-details {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(209, 189, 131, .58) rgba(0, 0, 0, .2);
}

.ds2-plan-total-panel { min-height: 0; }
.ds2-plan-totals { display: grid; gap: 12px; padding: 13px; }
.ds2-plan-total-section {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(191, 184, 147, .12);
  background: rgba(0, 0, 0, .18);
}
.ds2-plan-total-section > h3,
.ds2-plan-total-subhead {
  margin: 0;
  color: var(--ds2-plan-gold);
  font: 700 9px/1.55 Cinzel, serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ds2-plan-total-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ds2-plan-total-attributes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds2-plan-total-grid .ds2-plan-derived-tile { min-height: 60px; padding: 8px; }
.ds2-plan-total-grid .ds2-plan-derived-tile > b { font-size: 12px; }
.ds2-plan-total-load { grid-column: 1 / -1; }
.ds2-plan-total-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ds2-plan-total-table th,
.ds2-plan-total-table td {
  padding: 6px 5px;
  border-bottom: 1px solid rgba(191, 184, 147, .09);
  font: 400 8px/1.5 Cinzel, serif;
  overflow-wrap: anywhere;
}
.ds2-plan-total-table thead th { color: #d2c7a7; font-weight: 700; text-align: right; }
.ds2-plan-total-table thead th:first-child,
.ds2-plan-total-table tbody th { width: 38%; text-align: left; }
.ds2-plan-total-table tbody th { color: #9f9e93; font-weight: 600; }
.ds2-plan-total-table td { color: #e4d5aa; text-align: right; }
.ds2-plan-total-weapon { display: grid; gap: 7px; min-width: 0; padding: 10px; border: 1px solid rgba(191, 184, 147, .1); background: rgba(255, 255, 255, .018); }
.ds2-plan-total-weapon h4 { margin: 0; color: #e3ddcf; font: 700 10px/1.5 Cinzel, serif; }
.ds2-plan-total-weapon-slot { color: #9f9e93; font: 700 7px/1.5 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; }
.ds2-plan-total-subhead { padding-top: 7px; border-top: 1px solid rgba(191, 184, 147, .1); }
.ds2-plan-total-empty { margin: 0; color: #999a93; font: 400 8px/1.7 Cinzel, serif; }
.ds2-plan-total-ring { margin: 0; padding: 7px 0; border-bottom: 1px solid rgba(191, 184, 147, .08); color: #c8c5bb; font: 400 8px/1.7 Cinzel, serif; }
.ds2-plan-total-ring:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .ds2-plan-side { top: 78px; max-height: calc(100vh - 94px); max-height: calc(100dvh - 94px); }
}
@media (max-width: 740px) {
  .ds2-plan-side { position: static; max-height: none; padding-right: 0; overflow: visible; }
  .ds2-plan-tabs { position: static; }
  .ds2-plan-picker { width: calc(100vw - 16px); height: 92vh; height: 92dvh; max-height: 92vh; max-height: 92dvh; }
  .ds2-plan-picker-details { max-height: 28vh; max-height: 28dvh; overflow-y: auto; }
  .ds2-plan-picker-items { max-height: 38vh; max-height: 38dvh; }
}
@media (max-width: 430px) {
  .ds2-plan-total-attributes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}