/* ECOS · preparación V16. Ámbito exclusivo de tienda y equipo. */
#modal-root .preparation-menu {
  --prep-edge: #735c71;
  --prep-copper: #d8b18e;
  width: min(1060px, 100%);
  height: min(780px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(140deg, #302133, #211927 62%);
  border: 1px solid #baa3ad;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px #130f194d, 0 22px 75px #08050dc2;
}
.preparation-menu *, .preparation-menu *::before, .preparation-menu *::after { min-width: 0; }
.preparation-menu .prep-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 24px 15px;
  border-bottom: 1px solid #97788966;
  background: linear-gradient(105deg, #4930448f, transparent 70%);
}
.preparation-menu .prep-heading h2 { margin: 4px 0 5px; font-size: clamp(23px, 3vw, 30px); line-height: 1.15; }
.preparation-menu .prep-heading p { margin: 0; font-size: 12px; color: #d6c5d0; }
.preparation-menu .menu-eyebrow { color: var(--prep-copper); font-size: 10px; letter-spacing: .14em; }
.preparation-menu .prep-back { min-height: 44px; align-self: start; flex: 0 0 auto; padding: 9px 15px; }
.preparation-menu .prep-tabs { display: flex; gap: 0; padding: 0 24px; border-bottom: 1px solid var(--prep-edge); background: #160f1b55; flex: 0 0 auto; }
.preparation-menu .prep-tabs button { min-height: 48px; padding: 10px 23px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #c5b4c4; background: transparent; font: 600 14px var(--font); cursor: pointer; }
.preparation-menu .prep-tabs button[aria-selected="true"] { color: #faeddd; border-bottom-color: var(--prep-copper); background: #73536130; }
.preparation-menu .prep-body { padding: 18px 24px 22px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; scrollbar-color: #99798f #211827; scroll-padding-block: 12px; }
.preparation-menu .prep-columns { display: grid; grid-template-columns: minmax(230px, .95fr) minmax(0, 1.35fr); gap: 20px; align-items: start; }
.preparation-menu .prep-list { display: grid; gap: 7px; }
.preparation-menu p.prep-section-caption { font-size: 10px; line-height: 1.4; color: #b8a4b5; text-transform: uppercase; letter-spacing: .13em; margin: 0 0 7px; }
.preparation-menu .prep-choice { width: 100%; padding: 11px 12px; border: 1px solid #786175; border-radius: 5px; background: #3c293c; color: #f2e7de; font: inherit; text-align: left; min-height: 52px; cursor: pointer; transition: border-color .15s, background .15s; }
.preparation-menu .prep-choice:hover { border-color: #c4a3ae; background: #51354b; }
.preparation-menu .prep-choice[aria-pressed="true"] { border-color: #e3c7a9; background: linear-gradient(110deg, #654053, #482e41); box-shadow: inset 3px 0 #e3c7a9; }
:root[data-input-modality="keyboard"] .preparation-menu :is(button, a):focus { outline: 2px solid #fff3d8; outline-offset: 3px; }
.preparation-menu .prep-item-choice { display: flex; gap: 11px; align-items: center; }
.preparation-menu .prep-item-copy { display: grid; gap: 5px; flex: 1 1 auto; }
.preparation-menu .prep-item-copy b { font-size: 13px; line-height: 1.4; }
.preparation-menu .prep-item-copy small { display: block; font-size: 11px; line-height: 1.45; color: #d1bacb; }
.preparation-menu .prep-item-copy .prep-item-effect { color: #bbaab8; font-size: 10px; }
.preparation-menu .prep-price { align-self: center; color: #f0d4ad; font-size: 12px; white-space: nowrap; }
.prep-item-icon { width: 38px; height: 38px; flex: 0 0 38px; image-rendering: pixelated; object-fit: contain; }
.preparation-menu .prep-empty-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: #b79ba8; border: 1px dashed #826878; border-radius: 50%; }
.preparation-menu .prep-detail { padding: 18px; border: 1px solid #866b8066; border-top: 2px solid #b68d7566; border-radius: 5px; background: linear-gradient(145deg, #241a2e, #1c1723); }
.preparation-menu .prep-item-title { display: flex; align-items: center; gap: 14px; }
.preparation-menu .prep-item-title .prep-item-icon { width: 56px; height: 56px; flex-basis: 56px; }
.preparation-menu .prep-detail h3 { text-transform: none; letter-spacing: 0; margin: 4px 0; font: 600 24px/1.15 Georgia, serif; color: #faecdc; }
.preparation-menu p.prep-description { color: #e6d5df; font-size: 13px; line-height: 1.6; margin: 16px 0 12px; }
.preparation-menu p.prep-note, .preparation-menu .prep-note { color: #bcaabb; font-size: 11px; line-height: 1.55; margin: 9px 0; }
.preparation-menu .prep-purchase-receipt { border-block: 1px solid #72586d66; padding: 12px 0; margin: 20px 0 12px; }
.preparation-menu .prep-purchase-receipt p { display: flex; gap: 12px; justify-content: space-between; font-size: 13px; margin: 8px 0; }
.preparation-menu .prep-purchase-receipt b { color: #e8c99e; }
.preparation-menu .prep-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 24px; border-top: 1px solid var(--prep-edge); background: #211525; box-shadow: 0 -5px 18px #0c071328; }
.preparation-menu .prep-footer-copy { display: grid; gap: 5px; }
.preparation-menu .prep-footer-copy b { color: #eaddd1; font-size: 13px; line-height: 1.4; }
.preparation-menu .prep-footer-copy small { color: #bca9b7; font-size: 11px; line-height: 1.4; }
.preparation-menu .prep-footer .cmd { min-height: 48px; flex: 0 0 auto; max-width: 55%; padding: 10px 19px; font-size: 13px; text-align: center; }
.preparation-menu .prep-footer .cmd:disabled { opacity: 1; background: #3b2e3b; color: #a795a7; border-color: #5a495c; }
.preparation-menu .prep-footer .cmd:disabled small { color: #c5b3c1; font-size: 10px; }
.preparation-menu .prep-active { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; margin: 0 0 18px; }
.preparation-menu .prep-member { display: flex; align-items: center; gap: 10px; padding: 10px; }
.preparation-menu .prep-member .portrait { width: 44px; height: 44px; flex: 0 0 44px; border-color: #9c7e87; border-radius: 4px; }
.preparation-menu .prep-member-copy { display: grid; gap: 5px; }
.preparation-menu .prep-member-copy b { font-size: 13px; }
.preparation-menu .prep-vitals-compact { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10px; color: #c8b7c9; line-height: 1.35; }
.preparation-menu .prep-vitals-compact span { white-space: nowrap; }
.preparation-menu .prep-ko { color: #ffb3ad; font-weight: 700; }
.preparation-menu .prep-hero { display: flex; gap: 14px; margin-bottom: 16px; align-items: start; }
.preparation-menu .prep-hero > .portrait { flex: 0 0 72px; border-color: #a3838d; }
.preparation-menu .prep-hero > div { flex: 1 1 auto; }
.preparation-menu .prep-hero h3 { margin-top: 0; }
.preparation-menu .prep-hero p.prep-note { margin: 4px 0 9px; }
.preparation-menu .prep-vitals { display: grid; gap: 8px; }
.preparation-menu .prep-vitals .bar { height: 5px; }
.preparation-menu .prep-vitals .bar-label { font-size: 10px; margin-top: 3px; }
.preparation-menu .prep-compare-members { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.preparation-menu .prep-compare-members .prep-member { flex: 1 1 100px; padding: 7px; gap: 7px; }
.preparation-menu .prep-compare-members .portrait { width: 32px; height: 32px; flex-basis: 32px; }
.preparation-menu .prep-compare-members .prep-vitals-compact { display: none; }
.preparation-menu .prep-compare-members .prep-member-copy b { font-size: 12px; }
.preparation-menu .prep-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 4px 0 13px; border: 1px solid #81637744; border-radius: 4px; overflow: hidden; }
.preparation-menu .prep-stat { display: grid; gap: 5px; padding: 9px 8px; background: #4d324128; border-right: 1px solid #81637733; border-bottom: 1px solid #81637733; }
.preparation-menu .prep-stat > small { color: #bca8ba; font-size: 9px; line-height: 1.3; }
.preparation-menu .prep-stat > span { font-size: 13px; color: #d0bfcc; }
.preparation-menu .prep-stat b { color: #f3e5d9; }
.preparation-menu .prep-stat-arrow { color: #937f93; font-size: 10px; }
.preparation-menu .prep-stat--up b, .preparation-menu .prep-stat--up > small:last-child { color: #b7dec7; }
.preparation-menu .prep-stat--down b, .preparation-menu .prep-stat--down > small:last-child { color: #e8a6a9; }
.preparation-menu .prep-effects { display: grid; gap: 9px; border-left: 2px solid #b88e7777; padding-left: 10px; }
.preparation-menu .prep-effects p { margin: 0; font-size: 11px; }
.preparation-menu .prep-effects p > b { color: #dbc4b0; }
.preparation-menu .prep-effects small { display: block; color: #b7a5b8; font-size: 10px; line-height: 1.5; margin-top: 3px; }
.preparation-menu p.prep-warning { margin: 12px 0 8px; padding: 9px 10px; border-left: 3px solid #cdad83; background: #ac7b3820; color: #ebd7b7; font-size: 11px; line-height: 1.6; }
.preparation-menu .prep-synergy { margin-top: 17px; padding-top: 12px; border-top: 1px solid #80637666; }
.preparation-menu .prep-synergy h4 { margin: 0 0 6px; color: #d0b094; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.preparation-menu .prep-synergy p { margin: 4px 0; font-size: 11px; color: #c9b9c8; }
@media (max-width: 700px) {
  #modal-root .preparation-menu { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .preparation-menu .prep-heading { padding: 14px 15px 11px; gap: 10px; }
  .preparation-menu .prep-heading h2 { font-size: 24px; }
  .preparation-menu .prep-heading p { font-size: 11px; }
  .preparation-menu .prep-tabs { padding-inline: 15px; }
  .preparation-menu .prep-tabs button { flex: 1; padding: 9px 13px; }
  .preparation-menu .prep-body { padding: 15px; }
  .preparation-menu .prep-columns { grid-template-columns: 1fr; gap: 17px; }
  .preparation-menu .prep-detail { padding: 15px; }
  .preparation-menu .prep-active { grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 5px; margin-bottom: 15px; }
  .preparation-menu .prep-active .prep-member { flex-direction: column; gap: 7px; align-items: start; }
  .preparation-menu .prep-active .prep-vitals-compact { flex-direction: column; font-size: 9px; }
  .preparation-menu .prep-footer { gap: 9px; padding: 11px 15px; }
  .preparation-menu .prep-footer .cmd { font-size: 12px; padding: 10px 12px; }
  .preparation-menu .prep-footer-copy b { font-size: 12px; }
  .preparation-menu .prep-footer-copy small { font-size: 10px; }
  .preparation-menu .prep-back { padding: 9px 12px; font-size: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #modal-root .preparation-menu { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .preparation-menu .prep-heading { padding: 8px 15px; align-items: center; }
  .preparation-menu .prep-heading h2 { font-size: 21px; margin: 2px 0; }
  .preparation-menu .prep-heading .prep-subtitle { display: none; }
  .preparation-menu .prep-heading .menu-eyebrow { font-size: 9px; }
  .preparation-menu .prep-tabs { padding-inline: 15px; }
  .preparation-menu .prep-tabs button { min-height: 44px; padding-block: 8px; font-size: 12px; }
  .preparation-menu .prep-body { padding: 12px 15px; }
  .preparation-menu .prep-columns { grid-template-columns: minmax(210px, .95fr) minmax(0, 1.35fr); gap: 14px; }
  .preparation-menu .prep-active { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .preparation-menu .prep-active .prep-member { flex-direction: row; }
  .preparation-menu .prep-footer { padding: 7px 15px; }
  .preparation-menu .prep-footer .cmd { min-height: 44px; }
  .preparation-menu .prep-footer-copy small { font-size: 10px; }
}
body.high-contrast .preparation-menu .prep-choice { border-color: #d6c4ce; }
body.high-contrast .preparation-menu .prep-note { color: #e1d4df; }