/* Álbum general V2 v1.1 · BLOG */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body.album-v2-page {
  margin: 0;
  min-height: 100vh;
  background: #f4f6f8;
  color: #18212b;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}
body.album-v2-page button,
body.album-v2-page input,
body.album-v2-page select { font: inherit; }
body.album-v2-page .v2-nav > a.is-current { background:#e9eef2; color:#765510; }

.album-shell { max-width:1500px; margin:0 auto; padding:32px 28px 70px; }
.album-breadcrumbs { margin-bottom:24px; }
.album-loading { margin:13vh auto; text-align:center; color:#66727f; font-weight:750; }
.album-message { max-width:760px; margin:10vh auto; padding:34px; text-align:center; background:#fff; border:1px solid #dde3e8; border-radius:24px; box-shadow:0 18px 45px rgba(24,33,43,.08); }
.album-message h1 { margin:0 0 8px; }
.album-message p { color:#66727f; }
.album-message.is-error { border-color:#e7c7c4; background:#fff8f7; color:#813d38; }
.album-primary-link { display:inline-flex; margin-top:10px; padding:10px 16px; border:1px solid #d4dde4; border-radius:999px; background:#e9eef2; color:#314252 !important; text-decoration:none; font-weight:800; }

.album-hero { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:30px; align-items:center; padding:36px 38px; margin-bottom:24px; background:#fff; border:1px solid #dde3e8; border-radius:28px; box-shadow:0 18px 45px rgba(24,33,43,.08); }
.album-hero h1 { margin:5px 0 0; font-size:clamp(2.4rem,4.6vw,4.8rem); line-height:.98; letter-spacing:-.045em; }
.album-hero p { max-width:790px; margin:18px 0 0; color:#596571; font-size:1.05rem; line-height:1.65; }
.album-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.album-stat { padding:17px 18px; border:1px solid #d8e1e8; border-radius:18px; background:linear-gradient(145deg,#f7f9fb,#eef3f6); color:#18212b; box-shadow:0 8px 18px rgba(24,33,43,.05); }
.album-stat span { display:block; color:#66727f; text-transform:uppercase; letter-spacing:.09em; font-size:.67rem; font-weight:850; }
.album-stat strong { display:block; margin-top:3px; color:#1f3344; font-size:1.55rem; }

.album-book { overflow:hidden; background:#f9fafb; border:1px solid #d6dde3; border-radius:30px; box-shadow:0 18px 45px rgba(24,33,43,.07); }
.album-cover-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:30px 38px; background:linear-gradient(180deg,#f9fafb,#f4f6f8); border-bottom:1px solid #d6dde3; }
.album-cover-heading h2 { margin:4px 0 0; font-size:clamp(1.65rem,2.4vw,2.5rem); letter-spacing:-.025em; }
.album-cover-heading p { margin:0; color:#766b56; font-weight:750; }

.album-chapter-tabs { display:flex; gap:10px; padding:18px 38px; border-bottom:1px solid #dde3e8; background:#f7f9fb; }
.album-chapter-tabs button { appearance:none; border:1px solid #cbd3da; background:#fff; color:#6d6047; padding:10px 16px; border-radius:999px; cursor:pointer; font-weight:800; }
.album-chapter-tabs button.is-active { background:#e7edf2; border-color:#c8d4dd; color:#243746; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }

.album-view { padding:30px 38px 40px; }
.album-view-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:24px; }
.album-view-heading h2 { margin:4px 0 0; font-size:clamp(1.6rem,2.5vw,2.45rem); letter-spacing:-.025em; }
.album-view-heading > p { max-width:620px; margin:0; text-align:right; color:#766f62; }

.album-spread-stage { perspective:1800px; }
.album-spread { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr); min-height:570px; border:1px solid #cdd5dc; border-radius:22px; overflow:hidden; background:#eef2f5; box-shadow:0 18px 35px rgba(77,60,25,.10); transform-style:preserve-3d; }
.album-page { position:relative; min-width:0; padding:30px; background:linear-gradient(90deg,#f9fafb 0,#f7f9fb 100%); }
.album-page-right { background:linear-gradient(90deg,#f7f9fb 0,#f9fafb 100%); }
.album-gutter { position:relative; background:linear-gradient(90deg,rgba(74,56,24,.06),rgba(74,56,24,.17),rgba(74,56,24,.06)); box-shadow:inset 7px 0 10px rgba(74,56,24,.04), inset -7px 0 10px rgba(74,56,24,.04); }
.album-gutter::before { content:""; position:absolute; inset:0 6px; border-left:1px solid rgba(108,84,36,.16); border-right:1px solid rgba(108,84,36,.16); }

.album-spread.turn-next { animation:albumTurnNext .30s ease both; transform-origin:right center; }
.album-spread.turn-prev { animation:albumTurnPrev .30s ease both; transform-origin:left center; }
@keyframes albumTurnNext {
  0% { opacity:.4; transform:rotateY(-7deg) translateX(22px); }
  100% { opacity:1; transform:rotateY(0) translateX(0); }
}
@keyframes albumTurnPrev {
  0% { opacity:.4; transform:rotateY(7deg) translateX(-22px); }
  100% { opacity:1; transform:rotateY(0) translateX(0); }
}

.album-global-spread { min-height:520px; }
.album-global-list { display:grid; gap:18px; }
.album-global-rank { display:grid; grid-template-columns:140px minmax(0,1fr); gap:20px; align-items:center; padding:16px; border:1px solid #d6dde3; border-radius:20px; background:rgba(255,255,255,.58); }
.album-global-rank-visual { appearance:none; width:140px; height:118px; display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.album-global-rank-visual:disabled { cursor:default; }
.album-global-rank-visual img { display:block; width:100%; height:100%; object-fit:contain; background:transparent; }
.album-global-empty-mark { width:96px; height:96px; display:grid; place-items:center; border:2px dashed #cbd3da; border-radius:24px; background:#e9eef2; color:#9c917b; font-size:2rem; font-weight:900; }
.album-global-rank-copy { min-width:0; }
.album-global-family { display:block; margin-bottom:3px; color:#8d6d29; text-transform:uppercase; letter-spacing:.08em; font-size:.70rem; font-weight:900; }
.album-global-rank-copy strong { display:block; font-size:1.03rem; line-height:1.2; }
.album-global-progress { display:block; margin-top:6px; color:#625a4d; font-size:.82rem; font-weight:750; }
.album-global-rank-copy small { display:block; margin-top:5px; color:#8a8273; font-size:.72rem; }

.album-level-toolbar { display:grid; grid-template-columns:minmax(180px,260px) auto 1fr; align-items:end; gap:18px; margin-bottom:20px; padding:16px 18px; border:1px solid #d6dde3; border-radius:18px; background:#f7f9fb; }
.album-field { display:grid; gap:5px; }
.album-field label { color:#776a50; text-transform:uppercase; letter-spacing:.08em; font-size:.67rem; font-weight:900; }
.album-field select,
.album-field input { width:100%; min-height:42px; padding:8px 12px; border:1px solid #cbd3da; border-radius:12px; background:#fff; color:#1d2731; font-weight:750; }
.album-level-nav-controls { display:flex; align-items:end; gap:10px; }
.album-level-field { width:110px; }
.album-page-button { appearance:none; width:44px; height:42px; border:1px solid #cbd3da; border-radius:12px; background:#fff; color:#6d6047; cursor:pointer; font-weight:900; }
.album-page-button:disabled,
.album-bottom-button:disabled { opacity:.35; cursor:default; }
.album-page-status { justify-self:end; align-self:center; color:#766f62; font-weight:800; }

.album-page-head { margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #dde3e8; }
.album-page-head h3 { margin:4px 0 4px; font-size:clamp(1.35rem,2.2vw,2rem); line-height:1.1; }
.album-page-head-right { text-align:center; }
.album-level-label { display:block; color:#9b741d; font-weight:850; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.album-knowledge-id { font-family:Consolas,"Courier New",monospace; color:#8b9399; font-size:.70rem; }
.album-page-progress { color:#766f62; font-size:.82rem; }
.album-page-subhead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.album-page-subhead strong { font-size:.95rem; }
.album-page-subhead span { color:#817966; font-size:.78rem; }

.album-slot-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.album-level-badge-grid { align-content:start; }
.album-badge { min-width:0; }
.album-badge-button { appearance:none; display:block; width:100%; padding:0; border:0; background:transparent; text-align:center; cursor:pointer; color:inherit; }
.album-badge-frame { position:relative; height:118px; display:grid; place-items:center; border-radius:17px; }
.album-badge-frame img { display:block; width:100%; height:100%; object-fit:contain; background:transparent; }
.album-badge.is-missing .album-badge-frame { border:2px dashed #cbd3da; background:repeating-linear-gradient(135deg,#eef2f5 0,#eef2f5 8px,#e1e7ec 8px,#e1e7ec 16px); }
.album-badge.is-missing .album-badge-frame img { filter:grayscale(1); opacity:.10; }
.album-slot-number { position:absolute; inset:auto 8px 8px auto; min-width:25px; height:25px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.9); border:1px solid #cbd3da; color:#8c816b; font-size:.69rem; font-weight:900; }
.album-earned-mark { position:absolute; top:5px; right:5px; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#eaf7ef; color:#247347; font-size:.78rem; font-weight:950; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.album-badge-name { display:block; margin-top:7px; min-height:34px; color:#596571; font-size:.71rem; line-height:1.3; }
.album-badge.is-missing .album-badge-name { color:#9b9488; }
.album-empty-copy { color:#8b8272; font-style:italic; }

.album-card-area { min-height:410px; display:grid; place-items:center; gap:18px; }
.album-card { width:min(310px,100%); }
.album-card-button { appearance:none; width:100%; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; color:inherit; }
.album-card-frame { position:relative; min-height:380px; display:grid; place-items:center; overflow:hidden; border-radius:18px; }
.album-card-frame img { display:block; width:100%; max-height:420px; object-fit:contain; }
.album-card.is-missing .album-card-frame { border:2px dashed #cbd3da; background:repeating-linear-gradient(135deg,#eef2f5 0,#eef2f5 9px,#e1e7ec 9px,#e1e7ec 18px); }
.album-card.is-missing .album-card-frame img { filter:grayscale(1); opacity:.09; }
.album-card-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#948a76; font-weight:850; text-align:center; padding:24px; }
.album-card-placeholder strong { display:block; font-size:2.4rem; line-height:1; margin-bottom:6px; }
.album-card-level-overlay { position:absolute; right:0; bottom:0; width:48%; min-height:6.3%; display:flex; justify-content:flex-end; align-items:center; padding:4px 8px 5px; background:rgba(247,249,251,.94); border-top:1px solid #d6dde3; border-left:1px solid #d6dde3; color:#765510; font-family:Georgia,serif; font-size:.72rem; font-weight:700; white-space:nowrap; }
.album-card-name { display:block; margin-top:9px; color:#596571; font-size:.78rem; line-height:1.3; text-align:center; }
.album-card-none { border:2px dashed #cbd3da; background:#eef2f5; }

.album-empty-page { display:grid; align-content:start; }
.album-empty-level { min-height:360px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; color:#8f856f; }
.album-empty-level strong { font-size:2rem; }
.album-empty-level span { max-width:360px; }
.album-empty-level-secondary strong { color:#b5aa93; font-size:3rem; }

.album-bottom-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin-top:18px; }
.album-bottom-nav > span { color:#766f62; font-weight:800; text-align:center; }
.album-bottom-button { appearance:none; min-height:44px; padding:9px 16px; border:1px solid #cbd3da; border-radius:999px; background:#fff; color:#6d6047; cursor:pointer; font-weight:850; }
.album-bottom-button:last-child { justify-self:end; }

.album-modal { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:20px; background:rgba(10,15,20,.72); }
.album-modal-card { width:min(720px,96vw); max-height:88vh; overflow:auto; background:white; border-radius:22px; padding:24px; box-shadow:0 30px 80px rgba(0,0,0,.3); }
.album-modal-close { float:right; border:1px solid #dde3e8; background:white; border-radius:999px; padding:6px 11px; cursor:pointer; font-size:1.25rem; }
.album-modal-image-wrap { position:relative; width:max-content; max-width:100%; margin:10px auto 18px; }
.album-modal-image-wrap img { display:block; max-width:100%; max-height:55vh; object-fit:contain; margin:0 auto; }
.album-modal-card h2 { margin:5px 0 7px; }
.album-modal-card p { margin:0; color:#66727f; white-space:pre-line; }

@media (max-width:1100px) {
  .album-hero { grid-template-columns:1fr; }
  .album-level-toolbar { grid-template-columns:1fr auto; }
  .album-page-status { grid-column:1 / -1; justify-self:start; }
  .album-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:820px) {
  .album-shell { padding:20px 14px 44px; }
  .album-hero { padding:24px; border-radius:22px; }
  .album-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .album-cover-heading,
  .album-view-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .album-cover-heading { padding:24px 20px; }
  .album-chapter-tabs { padding:15px 20px; overflow:auto; }
  .album-view { padding:22px 16px 28px; }
  .album-view-heading > p { text-align:left; }
  .album-spread { display:block; min-height:0; border-radius:18px; }
  .album-gutter { display:none; }
  .album-page { padding:22px 18px; }
  .album-page-right { border-top:1px solid #cdd5dc; }
  .album-global-rank { grid-template-columns:105px minmax(0,1fr); gap:14px; }
  .album-global-rank-visual { width:105px; height:94px; }
  .album-level-toolbar { grid-template-columns:1fr; }
  .album-level-nav-controls { justify-content:center; }
  .album-page-status { justify-self:center; }
  .album-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
  .album-badge-frame { height:104px; }
  .album-card-area { min-height:0; }
  .album-card { width:min(300px,100%); }
  .album-bottom-nav { grid-template-columns:1fr 1fr; }
  .album-bottom-nav > span { grid-column:1 / -1; grid-row:1; }
  .album-bottom-button { grid-row:2; }
}

@media (max-width:520px) {
  .album-slot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .album-badge-frame { height:118px; }
  .album-global-rank { grid-template-columns:1fr; text-align:center; }
  .album-global-rank-visual { margin:0 auto; }
  .album-level-nav-controls { width:100%; }
  .album-level-field { flex:1; }
  .album-bottom-button { font-size:.82rem; padding-inline:10px; }
}

@media (prefers-reduced-motion: reduce) {
  .album-spread.turn-next,
  .album-spread.turn-prev { animation:none; }
}