:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #050b13; color: #eaf6ff; }
* { box-sizing: border-box; }
html.library-embedded { background: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-height: 0; margin: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: radial-gradient(circle at 50% -10%, #123651 0, #07111d 42%, #03070c 100%); }
body.library-embedded { background: transparent; }
body.library-embedded::before { position: fixed; z-index: 0; inset: 0; content: ''; background: rgb(3 8 16 / 58%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: none; }
body.library-embedded > :is(.library-header, .library-tabs, main) { position: relative; z-index: 1; }
body.character-card-preview-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.library-header { min-height: 108px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 1.2rem clamp(1rem, 4vw, 4rem); border-bottom: 1px solid #28465c; background: #07121edb; }
body.library-embedded .library-header { background: rgb(7 18 30 / 72%); }
.library-header > div { text-align: center; }
.library-header small, .view-heading > div > p:first-child, .pane-heading small { color: #54d8ff; font-size: .7rem; font-weight: 900; letter-spacing: .2em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 2rem; letter-spacing: -.04em; text-transform: uppercase; }
.back-link { color: #a8d8ee; text-decoration: none; }
.owner-control { justify-self: end; display: grid; gap: .35rem; color: #85a8bb; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.owner-control input, .filters input, .filters select, .editor-heading input, .pane-heading input { min-height: 42px; border: 1px solid #315a72; border-radius: .55rem; padding: .65rem .8rem; background: #071523; color: #fff; outline: none; }
.owner-control input:focus, input:focus, select:focus { border-color: #65dcff; box-shadow: 0 0 0 3px #36cff522; }
.library-tabs { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; gap: .5rem; padding: .75rem; border-bottom: 1px solid #1b3446; background: #07111df2; backdrop-filter: blur(14px); }
body.library-embedded .library-tabs { background: rgb(7 17 29 / 72%); }
.library-tabs a { min-width: 130px; padding: .7rem 1rem; border: 1px solid transparent; border-radius: 999px; color: #8eacbd; text-align: center; text-decoration: none; font-weight: 850; text-transform: uppercase; }
.library-tabs a.is-active { border-color: #55d7fa; background: #0e3044; color: #fff; }
main { width: min(1420px, calc(100% - 2rem)); height: 100%; min-height: 0; margin: 0 auto; padding: 1.4rem 0; overflow: hidden; }
#browser-view, #decks-view, #deck-editor { height: 100%; min-height: 0; }
#browser-view { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
#decks-view { display: grid; grid-template-rows: auto minmax(0, 1fr); }
#deck-editor { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
#browser-view[hidden], #decks-view[hidden], #deck-editor[hidden] { display: none; }
.view-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.3rem; }
.view-heading h2 { margin-bottom: .35rem; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.05em; }
.view-heading p { margin-bottom: 0; color: #91adbd; }
.result-count { padding: .5rem .75rem; border: 1px solid #29485b; border-radius: 999px; color: #8edcf4; font-size: .78rem; font-weight: 800; }
.filters { display: grid; grid-template-columns: minmax(220px, 1fr) 220px 220px; gap: .85rem; margin-bottom: 1.4rem; padding: 1rem; border: 1px solid #1d394d; border-radius: .85rem; background: #081520c9; }
body.library-embedded .filters, body.library-embedded .card-grid, body.library-embedded .deck-list { background-color: rgb(6 17 27 / 68%); }
.filters label { display: grid; gap: .35rem; color: #8aa6b6; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.card-grid { min-height: 0; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; padding: 1rem; overflow: auto; overscroll-behavior: contain; border: 1px solid #24465b; border-radius: 1rem; background: #06111be8; box-shadow: inset 0 0 30px #0005; scrollbar-color: #3ebcdd #081622; scrollbar-width: thin; }
.catalog-card-slot { position: relative; width: 100%; min-width: 0; aspect-ratio: 5 / 6.82; align-self: start; }
.catalog-card { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; overflow: hidden; display: block; padding: 0; border: 2px solid #29485b; border-radius: .5rem; background: linear-gradient(160deg, #0c2536, #07101a); color: #fff; text-align: left; box-shadow: none; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.catalog-card:hover { transform: translateY(-4px); border-color: #65dcff; }
.catalog-card--character-preview { overflow: visible; border: 0; border-radius: .5rem; background: transparent; box-shadow: none; }
.catalog-card--character-preview:hover { border-color: transparent; filter: drop-shadow(0 0 14px #65dcff66); }
.catalog-card--character-preview .character-card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; cursor: pointer; }
.catalog-card--character-preview .character-card__body { left: 0; top: 0; width: 100%; height: 100%; border-width: 3px; border-radius: .4rem; box-shadow: inset 0 0 0 1px #5c5c5c; }
.catalog-card--character-preview .character-card__artwork { border-radius: .2rem; }
.catalog-card--character-preview .character-card__rarity { width: 24%; height: 20%; padding: 4.5% 0 0 5%; background: linear-gradient(135deg, var(--catalog-rarity-color, #64748b) 0 49%, #08090b 50%); font-size: clamp(.72rem, 7cqw, 1.05rem); }
.catalog-card--character-preview .character-card[data-rarity="common"] { --catalog-rarity-color: #64748b; }
.catalog-card--character-preview .character-card[data-rarity="singular"] { --catalog-rarity-color: #16a34a; }
.catalog-card--character-preview .character-card[data-rarity="rare"] { --catalog-rarity-color: #0088c9; }
.catalog-card--character-preview .character-card[data-rarity="epic"] { --catalog-rarity-color: #9333ea; }
.catalog-card--character-preview .character-card[data-rarity="guardian"] { --catalog-rarity-color: #ea580c; }
.catalog-card--character-preview .character-card[data-rarity="deity"] { --catalog-rarity-color: #ca8a04; }
.catalog-card--character-preview :is(.character-card__cost, .character-card__equipment, .character-card__runes, .character-card__stats, .character-card__specials, .character-card__statuses) { display: none; }
.catalog-card__art { position: absolute; inset: 0 0 38%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, #1b526c, #08131e 70%); color: #39728d; font-size: 3rem; }
.catalog-card__art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.catalog-card__body { position: absolute; inset: 62% 0 0; display: grid; align-content: center; gap: .45rem; padding: 1rem; overflow: hidden; }
.catalog-card__body strong { font-size: 1.05rem; }
.catalog-card__meta { display: flex; justify-content: space-between; color: #9eb7c5; font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.quantity-pill { position: absolute; top: .65rem; right: .65rem; padding: .35rem .55rem; border: 1px solid #65dcff; border-radius: 999px; background: #07111de8; color: #86e8ff; font-size: .7rem; font-weight: 900; }
.empty-state { grid-column: 1 / -1; padding: 3rem 1rem; border: 1px dashed #2b4a5d; border-radius: 1rem; color: #7895a6; text-align: center; }
.primary-action, .quiet-action, .danger-action, .quantity-button { border: 1px solid #4fcfee; border-radius: .6rem; padding: .7rem 1rem; background: #0d6b88; color: #fff; font-weight: 850; cursor: pointer; }
.primary-action:hover { filter: brightness(1.15); }
.quiet-action { border-color: #345669; background: #0a1925; color: #a9c5d4; }
.danger-action { border-color: #9d4252; background: #491b26; }
.deck-list { min-height: 0; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 1rem; overflow: auto; overscroll-behavior: contain; border: 1px solid #24465b; border-radius: 1rem; background: #06111be8; box-shadow: inset 0 0 30px #0005; scrollbar-color: #3ebcdd #081622; scrollbar-width: thin; }
.deck-summary { display: grid; gap: .9rem; padding: 1.15rem; border: 1px solid #294b61; border-radius: 1rem; background: #091724e8; }
.deck-summary h3 { margin: 0; font-size: 1.2rem; }
.deck-summary__meta, .deck-summary__actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.status-badge { padding: .35rem .55rem; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.status-badge--draft { color: #eac365; }.status-badge--valid { color: #65e7a5; }.status-badge--invalid { color: #ff7188; }
.editor-heading { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto auto auto; align-items: end; gap: .8rem; margin-bottom: 1rem; }
.editor-heading label { display: grid; gap: .35rem; color: #92adbb; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.deck-counter { padding: .65rem .8rem; border: 1px solid #34566a; border-radius: .6rem; font-size: 1.1rem; font-weight: 950; }
.deck-status { min-width: 90px; }
.message { min-height: 1.3rem; color: #ffb86b; }
.deck-editor-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); gap: 1rem; }
.editor-pane { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 1rem; overflow: hidden; border: 1px solid #24465b; border-radius: 1rem; background: #07131ee6; }
.editor-pane--selected { background: #0a1723f2; }
.pane-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pane-heading h3 { margin: .2rem 0 0; }
.available-cards { min-height: 0; align-content: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .65rem; padding-right: .45rem; overflow: auto; overscroll-behavior: contain; scrollbar-color: #3ebcdd #081622; scrollbar-width: thin; }
.available-card, .selected-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid #28485b; border-radius: .7rem; background: #0b1c29; }
.available-card img, .selected-card img { width: 52px; height: 62px; border-radius: .4rem; object-fit: cover; background: #17384c; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.available-card__copy { min-width: 0; display: grid; gap: .2rem; }
.available-card__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.available-card__copy small { color: #83a5b7; }
.quantity-button { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.quantity-button:disabled { opacity: .35; cursor: not-allowed; }
.selected-cards { min-height: 0; align-content: start; display: grid; gap: .6rem; padding-right: .45rem; overflow: auto; overscroll-behavior: contain; scrollbar-color: #3ebcdd #081622; scrollbar-width: thin; }
.quantity-controls { display: flex; align-items: center; gap: .45rem; }
.quantity-controls strong { min-width: 1.5rem; text-align: center; }
.card-details { width: min(540px, calc(100% - 2rem)); border: 1px solid #4b829e; border-radius: 1rem; padding: 1.4rem; background: #081521; color: #effaff; box-shadow: 0 30px 80px #000c; }
.card-details::backdrop { background: #01060bd9; backdrop-filter: blur(4px); }
.dialog-close { position: absolute; top: .65rem; right: .75rem; border: 0; background: none; color: #9fc4d5; font-size: 1.7rem; cursor: pointer; }
.details-art { width: 100%; max-height: 260px; border-radius: .75rem; object-fit: cover; background: #102a3a; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.details-list { display: grid; gap: .5rem; padding: 0; list-style: none; color: #a9c0ce; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; padding: .8rem 1rem; border: 1px solid #5edcff; border-radius: .6rem; background: #092233; color: #fff; box-shadow: 0 12px 35px #0009; }
#character-library-preview-root { width: min(86vw, 63vh, 500px); display: grid; place-items: center; }
#character-library-preview-root .character-card { --preview-tilt-x: 0deg; --preview-tilt-y: 0deg; --preview-inspect-scale: 1; width: min(86vw, 63vh, 500px); filter: drop-shadow(0 20px 34px #000c) drop-shadow(0 0 18px #65d9ff44); transform: perspective(1100px) rotateX(var(--preview-tilt-x)) rotateY(var(--preview-tilt-y)) scale(var(--preview-inspect-scale)); transform-style: preserve-3d; transition: transform .18s ease, filter .2s ease; cursor: grab; touch-action: none; user-select: none; }
#character-library-preview-root .character-card.is-inspecting { --preview-inspect-scale: 1.025; cursor: grabbing; }
#character-library-preview-root :is(.character-card__equipment, .character-card__runes) { display: none; }
@media (max-width: 800px) {
  .library-header { grid-template-columns: 1fr; gap: .8rem; text-align: center; }
  .owner-control { justify-self: stretch; }.back-link { justify-self: start; }.filters { grid-template-columns: 1fr; }
  .editor-heading { grid-template-columns: 1fr 1fr; }.editor-heading label { grid-column: 1 / -1; }.deck-editor-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .library-tabs { overflow-x: auto; justify-content: start; }.library-tabs a { min-width: 110px; }
}

.card-grid::-webkit-scrollbar, .deck-list::-webkit-scrollbar, .available-cards::-webkit-scrollbar, .selected-cards::-webkit-scrollbar { width: 10px; }
.card-grid::-webkit-scrollbar-track, .deck-list::-webkit-scrollbar-track, .available-cards::-webkit-scrollbar-track, .selected-cards::-webkit-scrollbar-track { background: #081622; border-radius: 999px; }
.card-grid::-webkit-scrollbar-thumb, .deck-list::-webkit-scrollbar-thumb, .available-cards::-webkit-scrollbar-thumb, .selected-cards::-webkit-scrollbar-thumb { border: 2px solid #081622; border-radius: 999px; background: #3ebcdd; }

/* Tipografía oficial de navegación y encabezados de la Biblioteca. */
.library-header h1 { font-family: var(--font-primary); font-weight: 700; }
.view-heading h2, .pane-heading h3, .deck-summary h3 { font-family: var(--font-primary); font-weight: 600; }
.library-tabs a, .back-link, .primary-action, .quiet-action, .danger-action, .quantity-button { font-family: var(--font-primary); font-weight: 500; }
.library-header small, .view-heading > div > p:first-child, .pane-heading small,
.owner-control, .filters label, .editor-heading label { font-family: var(--font-secondary); font-weight: 500; }
.view-heading > div > p:not(:first-child), .message, .empty-state { font-family: var(--font-secondary); font-weight: 400; }
.result-count, .deck-counter, .deck-status, .status-badge, .quantity-pill { font-family: var(--font-secondary); font-weight: 600; }