/* ── MI CUENTA ── */
.login-wrap { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; justify-content: center; padding: var(--spacing-md) var(--page-pad); padding-top: var(--header-h); }
.login-box { width: 100%; max-width: 360px; }
.login-title { font-family: var(--font-display); font-size: 36px; font-weight: 300; font-style: italic; text-align: center; margin: 0 0 6px; }
.login-sub { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .15em; text-align: center; margin-bottom: var(--spacing-md); }
.tabs { display: flex; border-bottom: 0.5px solid var(--color-ink-faint); margin-bottom: var(--spacing-md); }
.tab { font-size: 14px; letter-spacing: .12em; color: var(--color-ink-dim); padding: 8px 16px; cursor: pointer; border-bottom: 0.5px solid transparent; margin-bottom: -0.5px; transition: color .3s, border-color .3s; }
.tab.active { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.forgot { font-size: 14px; color: var(--color-ink-dim); text-align: right; margin-bottom: var(--spacing-sm); cursor: pointer; transition: color .3s; display: block; }
.forgot:hover { color: var(--color-ink); }
.btn-submit { display: block; width: 100%; text-align: center; border: 0.5px solid var(--color-ink-faint); padding: 14px; font-family: var(--font-mono); font-size: 14px; letter-spacing: .2em; color: var(--color-ink); cursor: pointer; background: transparent; transition: border-color .3s, background .3s; }
.btn-submit:hover { border-color: var(--color-ink); background: var(--color-ink-faint); }
.login-divider { text-align: center; margin: var(--spacing-sm) 0; }
.btn-guest { font-size: 14px; color: var(--color-ink-dim); cursor: pointer; letter-spacing: .1em; transition: color .3s; }
.btn-guest:hover { color: var(--color-ink); }
.field-wrap { margin-bottom: 12px; }
.field-label { font-size: 14px; color: var(--color-ink-dim); letter-spacing: .08em; margin-bottom: 5px; display: block; }
.field-input { width: 100%; background: transparent; border: 0.5px solid var(--color-ink-faint); padding: 10px 12px; font-family: var(--font-mono); font-size: 14px; color: var(--color-ink); outline: none; transition: border-color .3s; box-sizing: border-box; }
.field-input::placeholder { color: var(--color-ink-dim); }
.field-input:focus { border-color: var(--color-ink); }
.check-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--spacing-sm); }
.check-box { width: 12px; height: 12px; border: 0.5px solid var(--color-ink-faint); flex-shrink: 0; margin-top: 2px; cursor: pointer; position: relative; }
.check-box.checked::after { content: ''; position: absolute; inset: 2px; background: var(--color-ink); }
.check-label { font-size: 14px; color: var(--color-ink-dim); line-height: 1.6; }

.dashboard-wrap { padding: calc(var(--header-h) + var(--spacing-md)) var(--page-pad) var(--spacing-lg); }
.dashboard-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--spacing-lg); align-items: start; }
.sidebar { border: 0.5px solid var(--color-ink-faint); padding: var(--spacing-sm); }
.sidebar-user { margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 0.5px solid var(--color-ink-faint); }
.sidebar-name { font-size: 14px; color: var(--color-ink); margin-bottom: 2px; }
.sidebar-email { font-size: 14px; color: var(--color-ink-dim); }
.sidebar-nav { list-style: none; }
.sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .1em; color: var(--color-ink-dim); padding: 10px 0; border-bottom: 0.5px solid var(--color-ink-faint); cursor: pointer; transition: color .3s; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover, .sidebar-link.active { color: var(--color-ink); }
.sidebar-link svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.sidebar-logout { display: block; font-size: 14px; color: var(--color-ink-dim); cursor: pointer; margin-top: var(--spacing-sm); letter-spacing: .1em; transition: color .3s; }
.sidebar-logout:hover { color: var(--color-ink); }
.content-panel { display: none; }
.content-panel.active { display: block; }
.panel-title { font-size: 14px; letter-spacing: .2em; color: var(--color-ink-dim); margin-bottom: var(--spacing-md); }
.order-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 0.5px solid var(--color-ink-faint); }
.order-row:last-child { border-bottom: none; }
.order-img { aspect-ratio: 1/1; background: var(--color-ph); overflow: hidden; }
.order-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-title { font-family: var(--font-display); font-size: 14px; font-weight: 300; font-style: italic; margin-bottom: 2px; }
.order-meta { font-size: 14px; color: var(--color-ink-dim); margin-bottom: 2px; }
.order-num { font-size: 14px; color: var(--color-ink-dim); }
.order-right { text-align: right; }
.order-status { font-size: 14px; border: 0.5px solid var(--color-ink-faint); padding: 3px 8px; color: var(--color-ink-dim); letter-spacing: .08em; margin-bottom: 4px; display: inline-block; }
.order-action { font-size: 14px; color: var(--color-ink-dim); cursor: pointer; transition: color .3s; display: block; text-align: right; }
.order-action:hover { color: var(--color-ink); }
.downloads-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.dl-item { cursor: pointer; }
.dl-img { aspect-ratio: 1/1; position: relative; overflow: hidden; background: var(--color-ph); }
.dl-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-overlay { position: absolute; inset: 0; background: var(--color-overlay-end); opacity: 0; transition: opacity .3s; display: flex; align-items: center; justify-content: center; }
.dl-item:hover .dl-overlay { opacity: 1; }
.dl-icon svg { width: 18px; height: 18px; stroke: var(--color-ink); fill: none; stroke-width: 1.5; }
.dl-title { font-size: 14px; color: var(--color-ink-dim); margin-top: 6px; }
.dl-note { font-size: 14px; color: var(--color-ink-dim); margin-top: 2px; }
@media (max-width: 767px) { .dashboard-layout { grid-template-columns: 1fr; } .downloads-grid { grid-template-columns: repeat(2,1fr); } }