/* Identidad visual de la portada, aplicada a toda la app. */
:root {
  --ink: #243e36;
  --muted: #64776e;
  --line: #e3ded0;
  --surface: #fffdf8;
  --canvas: #f8f4e9;
  --green: #244b3f;
  --green-soft: #e7f0e8;
  --rose: #b77568;
  --rose-soft: #fae9e2;
  --sand: #e7d4b2;
}

body, .app-shell { color: var(--ink); background: var(--canvas); }
.main-content { background: linear-gradient(#fff9ed 0, var(--canvas) 270px); }
.sidebar { background: #213d33; border-right: 1px solid #385447; }
.brand-bang { color: #dfa393; }
.brand-name small, .sidebar-label { color: #b3cbb7; }
.nav-item { color: #c8d9cc; }
.nav-item:hover:not(.active) { background: #355549; }
.nav-item.active { background: #fff3dc; color: #24483b; box-shadow: inset 3px 0 var(--rose); }
.sidebar-bottom p { color: #b5c9b8; }
.topbar { background: #fff9ed; border-bottom-color: #e8ddc9; }
.sync-status { color: #647b6c; }
.sync-status::before { background: #78a283; }
.page-heading h1, .panel-head h2, .section-title, .catalog-heading h2 { color: #253e35; }
.eyebrow, .activity-eyebrow, .business-kicker { color: #a36e60; }
.month-control, .agenda-period { background: #fffdf8; border-color: #ddd7c8; }
.month-control button:hover { background: #f7ebd7; }
.current-month, .button-light { background: #ecebdc; color: #365847; }
.button-dark { background: #244b3f; color: #fffdf5; }
.button-dark:hover { background: #326252; }
.button-outline { background: #fffdf8; border-color: #dcd8ca; color: #345246; }
.button-outline:hover { background: #f7efe1; }
.button-danger { background: #fbe9e2; color: #a45248; }
.card, .concept-list, .tarot-history, .movement-kpis > div { background: var(--surface); border-color: var(--line); box-shadow: 0 4px 18px #4a3c2210; }
.balance-card.main { background: #24483e; border-color: #24483e; }
.balance-card.main::before { border-color: #ecd8b835; }
.balance-card.main::after { border-color: #ecd8b835; }
.balance-icon, .movement-account-symbol, .activity-row-icon { background: #f1e5d0; color: #825b45; }
.flow-card.income { background: #edf4e9; }
.flow-card.expense { background: #fcf0e9; }
.flow-card.income strong, .movement-kpis strong.income, .movement-activity-row .income { color: #357251; }
.flow-card.expense strong, .movement-kpis strong.expense, .movement-activity-row .expense { color: #ad6353; }
.shared-card { background: #f1f5df; border-color: #d8dfbb; }
.shared-symbol { background: #244b3f; color: #f4e4bb; }
.shared-button { background: #244b3f; }
.shared-button:hover { background: #326252; }
.concept-filters, .business-tabs, .agenda-modes { background: #edeadc; }
.concept-filters button.active, .business-tabs button.active, .agenda-modes button.active { color: #284c3e; background: #fffdf8; }
.catalog-heading > span { background: #efe7d8; color: #655b45; }
.concept-row { border-bottom-color: #efe9de; }
.concept-row:hover { background: #fff8e9; }
.concept-mark { background: #f0e7d7; color: #6d6c52; }
.concept-mark.income, .concept-mark.done { background: #e5f0e1; color: #317a55; }
.concept-mark.expense { background: #fae8df; color: #ad6250; }
.concept-mark.debt { background: #eee8d9; color: #7a694e; }
.row-action, .activity-allocation-button { background: #eef2e7; border-color: #d2ddcc; color: #315f46; }
.row-action:hover:not(:disabled), .activity-allocation-button:hover { background: #e1ebda; }
.row-edit:hover { background: #f2e9dc; }
.movement-activities, .today-agenda, .activity-row { background: #f8f6ed; border-color: #e8e2d3; }
.movement-account-section.business .movement-account-symbol { background: #e6eee4; color: #285940; }
.activity-row.unclassified, .activity-unassigned { background: #fff1d9; border-color: #ead9b5; }
.activity-row.unclassified .activity-row-icon { background: #f6dfb8; color: #966932; }
.activity-settings-list > span { background: #e9f1e5; }
.agenda-filters button, .agenda-empty, .movement-jump a { background: #fffdf8; border-color: #e3dccb; }
.agenda-filters button.active { background: #244b3f; border-color: #244b3f; }
.agenda-calendar, .agenda-selected-list { background: #fffdf8; }
.agenda-day.today, .month-day.today { background: #f7f5e8; }
.appointment.hair, .appointment:not(.therapeutic):not(.personal):not(.reminder) { background: #fff1e8; border-color: #efd3c5; border-left-color: #c47c65; }
.appointment.therapeutic { background: #eeeff4; border-color: #d9dce8; border-left-color: #798797; }
.appointment.personal { background: #e9f3f0; border-color: #d4e6de; border-left-color: #5e988a; }
.appointment.reminder { background: #fff5dc; border-color: #eadcb8; border-left-color: #bd9951; }
.tarot-hero { background: #243f36; color: #fff5df; border: 1px solid #466457; }
.tarot-copy .business-kicker, .tarot-result-label { color: #e5bc89; }
.tarot-draw { background: #f0d0a1; color: #244436; }
.tarot-draw:hover { background: #f8ddb6; }
.tarot-wheel-card { border-color: #d8b880; outline-color: #d8b880; }
.tarot-history { background: #fffdf8; }
.tarot-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 11px; margin: 0 0 15px; }
.tarot-modes, .tarot-deck-selector { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid #dedaca; border-radius: 11px; background: #ede9dc; }
.tarot-modes button, .tarot-deck-selector button { display: inline-flex; align-items: center; gap: 7px; min-height: 37px; border: 0; border-radius: 8px; background: transparent; color: #56685f; padding: 7px 14px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.tarot-modes button.active, .tarot-deck-selector button.active { background: #fffdf8; color: #254d3e; box-shadow: 0 2px 5px #4a3c2419; }
.tarot-modes .glyph { width: 16px; height: 16px; }
.tarot-deck-selector { background: #f8f1e3; }
.tarot-deck-selector > span { margin: 0 7px 0 10px; color: #7b7865; font-size: 10px; font-weight: 800; }
.tarot-deck-selector button { min-height: 31px; padding: 5px 10px; }
.tarot-hero { position: relative; gap: 30px; padding: 38px; background: radial-gradient(circle at 78% 35%, #3d6255 0, #243f36 54%); }
.tarot-hero::before { content: '✧'; position: absolute; right: 26px; top: 17px; color: #d8b883; font-size: 30px; opacity: .7; }
.tarot-copy h2 { margin-bottom: 10px; }
.tarot-copy p { max-width: 450px; color: #dae3d4; font-size: 13px; }
.tarot-date { margin: 17px 0 22px; color: #f1e4c8; }
.tarot-result { margin-top: 19px; }
.tarot-copy h3 { margin: 6px 0 1px; color: #fff9ea; font-size: clamp(26px, 2.5vw, 34px); }
.tarot-group { color: #d4dfd0; }
.tarot-message { max-width: 460px; margin-top: 20px; padding: 17px 19px; border-left: 4px solid #d1a577; border-radius: 4px 10px 10px 4px; background: #fff6e6; box-shadow: 5px 5px 0 #182f2840; }
.tarot-message > span { color: #9b6c54; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.tarot-copy .tarot-message p { margin: 8px 0 0; color: #334b3f; font-size: 13px; line-height: 1.6; }
.tarot-stage { min-height: 390px; }
.tarot-revealed { width: min(100%, 245px); max-height: 420px; border: 7px solid #f8efdc; border-radius: 10px; box-shadow: 11px 12px 0 #b97b68, 0 20px 40px #07191477; }
.tarot-wheel { width: 250px; height: 310px; }
.tarot-wheel-card { width: 148px; height: 250px; border: 5px solid #d7b77d; border-radius: 9px; background: radial-gradient(circle, #2d6657 0 24%, transparent 25%), repeating-linear-gradient(45deg, #28483e 0 10px, #345a4c 10px 20px); transform: rotate(calc((var(--index) - 3) * 9deg)) translateX(calc((var(--index) - 3) * 11px)); }
.tarot-wheel-card b { width: 80px; height: 80px; display: grid; place-items: center; border: 1px solid #e3c684; border-radius: 50%; color: #f0d795; font-size: 56px; }
.tarot-wheel-card small { color: #f0d795; }
.tarot-guest-form { margin: 20px 0 0; }
.tarot-guest-form label { display: block; margin-bottom: 7px; color: #f0dbbd; font-size: 11px; font-weight: 800; }
.tarot-guest-form > div { display: flex; gap: 8px; }
.tarot-guest-form input { flex: 1; min-width: 0; height: 47px; padding: 0 13px; border: 1px solid #d6c8aa; border-radius: 9px; background: #fffdf8; color: #283e34; font-size: 13px; }
.tarot-guest-form input:focus-visible { outline: 2px solid #f0d0a1; outline-offset: 2px; }
.tarot-guest-form .tarot-draw { min-height: 47px; padding: 0 15px; white-space: nowrap; }
.tarot-guest-empty { margin-top: 18px; color: #e5d9bf !important; font-style: italic; }
.tarot-history-row { border-bottom-color: #eee8dc; }
.tarot-history-row img { border: 2px solid #e6d8be; border-radius: 5px; }
.tarot-guest-row { width: 100%; border: 1px solid #e8e0d0; border-radius: 9px; background: #fffdf8; padding: 7px 10px; text-align: left; }
.tarot-guest-row:hover, .tarot-guest-row.selected { border-color: #bb8b73; background: #fff6e7; }
.tarot-guest-row > span:last-child { color: #b07b65; font-size: 16px; }
.tarot-credit { margin-top: 12px; }
.bottom-nav { background: #fffaf0; border-top-color: #e4dccc; }
.bottom-nav button.active:not(.mobile-add) { background: #f2e9d7; color: #285947; }
.bottom-nav .mobile-add span { background: #244b3f; }

/* Modales: una ficha cálida, con acentos que indican la operación activa. */
.modal-backdrop { background: #152d27c9; backdrop-filter: blur(5px); }
.modal {
  --modal-accent: #366450;
  --modal-soft: #e9f1e5;
  width: min(100%, 590px);
  color: #263e34;
  background: #fffdf8;
  border: 1px solid #e8dcc8;
  border-radius: 20px;
  box-shadow: 0 28px 74px #0f261e55, 0 5px 0 #b87964;
}
.modal[data-kind="movement"][data-tone="expense"] { --modal-accent: #ac6553; --modal-soft: #fae9e2; }
.modal[data-kind="movement"][data-tone="income"] { --modal-accent: #347657; --modal-soft: #e6f1e7; }
.modal[data-kind="movement"][data-tone="transfer"] { --modal-accent: #4a7380; --modal-soft: #e9f0f1; }
.modal[data-kind="recurring"] { --modal-accent: #a56b52; --modal-soft: #faf0e6; }
.modal[data-kind="catalog"] { --modal-accent: #4d7a68; --modal-soft: #eaf2ec; }
.modal-header {
  position: sticky;
  padding: 25px 27px 21px;
  gap: 15px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, #b0a2831c 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, #b0a2831c 24px),
    #fbf2e3;
  border-bottom: 1px solid #e6dac5;
}
.modal-header::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--modal-accent) 0 76%, #cf9d83 76% 89%, #e0bd7b 89%); }
.modal-header::after { content: '✦'; position: absolute; right: 75px; top: 26px; color: #c9937b; font-size: 18px; line-height: 1; opacity: .6; }
.modal-symbol { width: 46px; height: 46px; border-radius: 12px; background: var(--modal-accent); color: #fff9e8; box-shadow: 3px 3px 0 #e8c9b3; }
.modal-symbol .glyph { width: 23px; height: 23px; }
.modal-kicker { margin-bottom: 5px; color: #956b55; font-size: 10px; letter-spacing: .13em; }
.modal-header h2 { color: #243e35; font: 800 23px/1.15 Manrope, sans-serif; letter-spacing: -.045em; }
.modal-header p { margin-top: 5px; color: #64756b; font-size: 12px; line-height: 1.4; }
.modal-close { width: 34px; height: 34px; border: 1px solid #dfd7c8; background: #fffaf1; color: #476056; }
.modal-close:hover { background: #f3e5d3; border-color: #d6bda8; }
.modal-content { padding: 16px 27px 27px; background: #fffdf8; }
.modal-content .form-grid { gap: 0 16px; }
.modal-content .field { margin: 10px 0; gap: 7px; }
.modal-content .field label, .modal-content .icon-picker-field > label { color: #485f53; font-size: 11px; font-weight: 800; letter-spacing: .015em; }
.modal-content .field input:not([type=checkbox]), .modal-content .field select, .icon-picker-toggle {
  min-height: 45px;
  border: 1px solid #d8d9ca;
  border-radius: 9px;
  background: #fff;
  color: #2a4036;
  font-size: 13px;
}
.modal-content .field input:not([type=checkbox]):hover, .modal-content .field select:hover, .icon-picker-toggle:hover { border-color: #b7bda8; }
.modal-content .field input:focus, .modal-content .field select:focus, .icon-picker-toggle:focus-visible {
  border-color: var(--modal-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 17%, transparent);
  outline: none;
}
.modal-content .form-grid > .field.full:first-child { margin: 15px 0 14px; padding: 13px 15px 15px; background: var(--modal-soft); border: 1px solid color-mix(in srgb, var(--modal-accent) 22%, white); border-radius: 11px; }
.modal-content .form-grid > .field.full:first-child input { background: #fffdfb; }
.modal-content .field-hint { color: #738379; font-size: 10px; line-height: 1.4; }
.modal-content .type-picker { gap: 6px; margin: 1px 0 8px; padding: 5px; background: #f3efe5; border: 1px solid #e6e0d1; border-radius: 12px; }
.modal-content .type-picker label { min-height: 44px; border: 1px solid transparent; border-radius: 8px; color: #61736a; font-size: 12px; }
.modal-content .type-picker label:hover { background: #fffaf2; }
.modal-content .type-picker label:has(input:focus-visible) { outline: 2px solid var(--modal-accent); outline-offset: 2px; }
.modal-content .type-picker label:has(input:checked) { background: #fffdf8; border-color: #ded8c9; color: var(--modal-accent); box-shadow: 0 2px 4px #2f372118; }
.type-picker .glyph { width: 17px; height: 17px; }
.icon-picker-toggle { padding: 5px 10px 5px 5px; }
.icon-picker-preview { background: var(--modal-soft); color: var(--modal-accent); }
.icon-picker-menu { background: #fffcf4; border-color: #e6dcca; }
.icon-picker-option:hover { background: #f6efe3; }
.icon-picker-option.selected { background: var(--modal-soft); border-color: var(--modal-accent); color: var(--modal-accent); }
.check-field { color: #395b47; }
.check-field input { accent-color: var(--modal-accent); }
.modal-content .modal-actions { margin: 18px -27px -27px; padding: 16px 27px calc(18px + env(safe-area-inset-bottom)); background: #fbf6eb; border-top: 1px solid #e8dfd0; box-shadow: 0 -6px 16px #4a381b0b; }
.modal-actions .button { min-height: 43px; padding: 10px 15px; }
.modal-actions .button-dark { background: var(--modal-accent); }
.modal-actions .button-dark:hover { filter: brightness(1.1); }
.modal-actions .button-dark::after { content: '↗'; margin-left: 11px; font-size: 16px; font-weight: 600; }
.quick-modal { width: min(100%, 500px); }
.quick-action-list { gap: 9px; }
.quick-action { border-color: #e4ddcc; background: #fffdf8; border-radius: 11px; }
.quick-action:hover, .quick-action:focus-visible { border-color: #c68d77; background: #fff5e8; }
.quick-action-icon.green { background: #e7f1e7; color: #367654; }
.quick-action-icon.orange { background: #fbe9e0; color: #ad6652; }
.quick-action-icon.blue { background: #e9eff0; color: #4a7380; }
.quick-action-arrow { color: #b17766; }

@media (max-width: 900px) { .bottom-nav { background: #fffaf0; border-top-color: #e4dccc; } }
@media (max-width: 900px) { .top-add { display: none; } }
@media (max-width: 750px) {
  .main-content { background: linear-gradient(#fff9ed 0, var(--canvas) 200px); }
  .tarot-toolbar { align-items: stretch; }
  .tarot-modes, .tarot-deck-selector { width: 100%; }
  .tarot-modes button { flex: 1; justify-content: center; padding: 7px 8px; }
  .tarot-deck-selector button { flex: 1; justify-content: center; }
  .tarot-hero { padding: 29px 22px; gap: 9px; }
  .tarot-stage { min-height: 325px; }
  .tarot-revealed { width: min(65vw, 220px); }
  .tarot-guest-form > div { flex-wrap: wrap; }
  .tarot-guest-form input { flex-basis: 100%; }
  .tarot-guest-form .tarot-draw { width: 100%; }
  .tarot-message { margin-top: 17px; }
  .modal { width: 100%; max-height: 94dvh; border: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 45px #0f261e4d; }
  .modal-header { padding: 22px 19px 17px; gap: 11px; }
  .modal-header::after { right: 62px; top: 23px; }
  .modal-symbol { width: 40px; height: 40px; }
  .modal-header h2 { font-size: 21px; }
  .modal-header p { font-size: 11px; }
  .modal-content { padding: 12px 19px 20px; }
  .modal-content .modal-actions { bottom: -20px; margin: 17px -19px -20px; padding: 12px 19px calc(15px + env(safe-area-inset-bottom)); }
  .modal-actions .button { min-height: 44px; }
}

/* Oráculos: portadas para elegir, cartas para explorar y lecturas para compartir. */
.oracle-intro { margin: 22px 0 18px; max-width: 650px; }
.oracle-intro h2 { margin: 8px 0 5px; color: #243f36; font-size: clamp(24px, 3vw, 35px); letter-spacing: -.045em; }
.oracle-intro p, .oracle-library-head p { margin: 0; color: #6e776d; line-height: 1.55; font-size: 13px; }
.oracle-deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(157px, 1fr)); gap: 14px; margin: 0 0 23px; }
.oracle-deck-choice { min-width: 0; display: grid; gap: 9px; padding: 8px; border: 1px solid #ded8c8; border-radius: 14px; background: #fffdf7; text-align: left; color: #243f36; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.oracle-deck-choice:hover, .oracle-deck-choice:focus-visible { transform: translateY(-4px); border-color: #b68c72; box-shadow: 0 12px 23px #463b281e; }
.oracle-deck-choice.selected { border: 2px solid #b77967; padding: 7px; box-shadow: 0 0 0 3px #eec9b96b; }
.oracle-cover, .oracle-face { --oracle-dark: #163e38; --oracle-light: #dce9d1; --oracle-ink: #f5e8c5; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 42%, #44665a, var(--oracle-dark) 76%); color: var(--oracle-ink); }
.palette-ink { --oracle-dark: #203c36; --oracle-light: #d1b778; --oracle-ink: #fff1c8; }
.palette-night { --oracle-dark: #182d48; --oracle-light: #b8cbd6; --oracle-ink: #e8d9ae; }
.palette-sage { --oracle-dark: #315047; --oracle-light: #d7d9a2; --oracle-ink: #faebc7; }
.palette-terracotta { --oracle-dark: #733f37; --oracle-light: #edc69d; --oracle-ink: #fff1d4; }
.palette-blue { --oracle-dark: #254f5c; --oracle-light: #d4dfd8; --oracle-ink: #f6e7c8; }
.palette-rose { --oracle-dark: #70475b; --oracle-light: #ecc1ba; --oracle-ink: #fff1dc; }
.palette-ochre { --oracle-dark: #655038; --oracle-light: #e4c99b; --oracle-ink: #fff1d7; }
.palette-violet { --oracle-dark: #4c426a; --oracle-light: #d6c6ed; --oracle-ink: #f8eeff; }
.palette-plum { --oracle-dark: #573e50; --oracle-light: #e8c8d1; --oracle-ink: #fff0e8; }
.palette-gold { --oracle-dark: #62512c; --oracle-light: #e8d28b; --oracle-ink: #fff5d5; }
.oracle-cover::before, .oracle-face::before { content: ''; position: absolute; inset: 9px; border: 1px solid #fff8d483; border-radius: 4px; pointer-events: none; }
.oracle-cover::after, .oracle-face::after { content: '✦     ✦'; position: absolute; top: 33px; width: 100%; text-align: center; color: var(--oracle-light); font-size: 11px; letter-spacing: 22px; pointer-events: none; }
.oracle-cover { height: 237px; padding: 18px 14px 16px; border-radius: 8px; }
.oracle-cover-top, .oracle-face-top { z-index: 1; color: var(--oracle-light); font-size: 8px; font-weight: 900; letter-spacing: .18em; text-align: center; }
.oracle-cover .oracle-symbol { z-index: 1; width: 74%; max-height: 122px; color: var(--oracle-light); filter: drop-shadow(0 10px 10px #0018); }
.oracle-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; filter: sepia(.2); }
.oracle-cover:has(.oracle-cover-photo) { background: #9f8369; }
.oracle-cover:has(.oracle-cover-photo) .oracle-cover-photo { opacity: .88; filter: saturate(.9); }
.oracle-cover:has(.oracle-cover-photo) .oracle-cover-top, .oracle-cover:has(.oracle-cover-photo) .oracle-cover-name, .oracle-cover:has(.oracle-cover-photo) .oracle-cover-bottom { padding: 4px 6px; border-radius: 4px; background: #1b342bdb; color: #fff7e5; }
.oracle-cover:has(.oracle-cover-photo)::after { opacity: .7; }
.oracle-cover-name { z-index: 1; max-width: 150px; font-family: Georgia, serif; font-size: 24px; line-height: .98; text-align: center; text-shadow: 0 2px 5px #0018; }
.oracle-cover-bottom, .oracle-face-bottom { z-index: 1; font-size: 8px; font-weight: 800; letter-spacing: .16em; text-align: center; }
.oracle-cover-info { display: grid; gap: 3px; min-height: 58px; padding: 0 4px 5px; }
.oracle-cover-info strong { font-size: 12px; }
.oracle-cover-info small { color: #768076; font-size: 10px; line-height: 1.35; }
.oracle-picker-hint { margin: 10px 0 22px; padding: 15px 18px; border-radius: 11px; background: #f5eee0; color: #637167; font-size: 12px; }
.oracle-draw { margin-top: 18px; }
.oracle-face { width: 245px; height: 405px; flex: none; padding: 26px 17px 22px; border: 7px solid #f9efdb; border-radius: 10px; box-shadow: 11px 12px 0 #b97b68, 0 20px 40px #07191477; }
.oracle-revealed { display: block; width: min(100%, 245px); max-height: 420px; object-fit: contain; border: 7px solid #f9efdb; border-radius: 10px; background: #f6edda; box-shadow: 11px 12px 0 #b97b68, 0 20px 40px #07191477; }
.oracle-face .oracle-symbol { width: 95%; max-height: 230px; color: var(--oracle-light); filter: drop-shadow(0 8px 11px #0015); }
.oracle-face-name { z-index: 1; max-width: 190px; font: 29px/1 Georgia, serif; text-align: center; text-shadow: 0 2px 5px #0018; }
.oracle-back { justify-content: center; gap: 6px; }
.oracle-back span { z-index: 1; font: italic 19px Georgia, serif; }
.oracle-library { margin: 24px 0; padding: 22px; border: 1px solid #e3ddcd; border-radius: 16px; background: #fffdf8; }
.oracle-library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.oracle-library-head h2 { margin: 6px 0; color: #243f36; font-size: 21px; letter-spacing: -.035em; }
.oracle-library-head .button { flex: none; }
.oracle-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 8px; margin-top: 21px; }
.oracle-catalogue-card { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 6px; border: 1px solid #e6e1d6; border-radius: 9px; background: #fff; text-align: left; color: #293f36; cursor: pointer; }
.oracle-catalogue-card:hover, .oracle-catalogue-card:focus-visible, .oracle-catalogue-card.selected { border-color: #bc8874; background: #fff6ec; }
.oracle-mini-art, .oracle-history-icon { flex: none; display: grid; place-items: center; width: 37px; height: 47px; overflow: hidden; border-radius: 4px; background: var(--oracle-dark); color: var(--oracle-light); }
.oracle-mini-art .oracle-symbol, .oracle-history-icon .oracle-symbol { width: 34px; height: 34px; }
.oracle-mini-art img { width: 100%; height: 100%; object-fit: cover; }
.oracle-catalogue-card > span:last-child { display: grid; gap: 2px; }
.oracle-catalogue-card small { color: #a17367; font-size: 9px; font-weight: 900; }
.oracle-catalogue-card strong { font-size: 11px; }
.oracle-library-detail { display: flex; align-items: center; gap: 30px; margin-top: 18px; padding: 25px; border-radius: 12px; background: #f3ecdd; }
.oracle-library-image .oracle-face, .oracle-library-image .tarot-revealed, .oracle-library-image .oracle-revealed { width: 145px; height: 240px; max-height: none; box-shadow: 5px 6px 0 #b97b68; }
.oracle-library-image .oracle-face { border-width: 4px; padding: 14px 8px 12px; }
.oracle-library-image .oracle-face .oracle-symbol { max-height: 127px; }
.oracle-library-image .oracle-face-name { font-size: 18px; }
.oracle-library-image .oracle-face-top, .oracle-library-image .oracle-face-bottom { font-size: 5px; }
.oracle-library-detail h3 { margin: 8px 0 11px; color: #263f36; font: 27px Georgia, serif; }
.oracle-library-detail p { max-width: 540px; color: #55645a; line-height: 1.65; font-size: 14px; }
.oracle-library-hint { margin: 14px 0 0; color: #7b8278; font-size: 12px; }
.oracle-history-icon { width: 35px; height: 59px; }
/* Sala de lectura: el mazo se abre sobre la página y la carta domina la vista. */
.modal.oracle-modal { width: min(1040px, calc(100vw - 32px)); max-height: min(94dvh, 920px); padding: 0; overflow: auto; border-radius: 22px; }
.oracle-modal .modal-header { margin: 0; padding: 22px 28px 19px; }
.oracle-modal .modal-content { padding: 22px 28px 28px; }
.oracle-dialog-tabs { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid #e4dac8; border-radius: 13px; background: #f4eee1; margin-bottom: 20px; }
.oracle-dialog-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 15px; border: 0; border-radius: 9px; background: transparent; color: #647268; font-size: 12px; font-weight: 800; }
.oracle-dialog-tabs button.active { background: #fffdf8; color: #244638; box-shadow: 0 3px 10px #473b251b; }
.oracle-dialog-tabs .glyph { width: 17px; height: 17px; }
.oracle-dialog-browser { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); align-items: start; gap: 22px; }
.oracle-dialog-list { max-height: min(65dvh, 620px); overflow: auto; padding-right: 8px; scrollbar-color: #bca990 #f5efe4; }
.oracle-dialog-list > p { margin: 2px 0 12px; color: #6d7b70; font-size: 12px; }
.oracle-dialog-list .oracle-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }
.oracle-dialog-list .oracle-catalogue-card { min-height: 58px; }
.oracle-dialog-detail, .oracle-dialog-welcome { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; min-height: 480px; padding: 24px; border: 1px solid #e9d8bd; border-radius: 18px; background: radial-gradient(circle at 10% 10%, #fffaf0, #f3e8d5 75%); box-shadow: inset 0 0 0 5px #fffaf2, 0 14px 35px #60492a13; }
.oracle-dialog-art { display: grid; place-items: center; min-width: 0; }
.oracle-dialog-card-image, .oracle-dialog-art .oracle-face { width: min(100%, 280px); height: auto; max-height: 440px; object-fit: contain; border: 8px solid #fff8ea; border-radius: 11px; box-shadow: 8px 10px 0 #b87965, 0 18px 30px #263e3450; }
.oracle-dialog-art .oracle-face { height: 430px; }
.oracle-dialog-reading { min-width: 0; }
.oracle-dialog-eyebrow { color: #a16e57; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.oracle-dialog-reading h3 { margin: 12px 0 9px; color: #233e34; font: 42px/1.05 Georgia, serif; letter-spacing: -.045em; }
.oracle-dialog-rule { display: flex; align-items: center; gap: 10px; color: #bb7965; font-size: 17px; margin: 16px 0; }
.oracle-dialog-rule::before, .oracle-dialog-rule::after { content: ''; height: 1px; flex: 1; background: #d9bfa6; }
.oracle-dialog-message { padding: 20px; border: 1px solid #e9d8c2; border-radius: 12px; background: #fffdf7; box-shadow: 4px 5px 0 #d9bc9c6b; }
.oracle-dialog-message span { color: #a1715f; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.oracle-dialog-message p { margin: 12px 0 0; color: #354b40; font: 20px/1.5 Georgia, serif; }
.oracle-dialog-note { color: #738075; font-size: 11px; line-height: 1.5; margin: 17px 0 0; }
.oracle-dialog-welcome .oracle-dialog-reading > p { color: #576b5e; line-height: 1.65; font-size: 14px; }
.oracle-dialog-form { margin-top: 19px; padding: 17px 19px; border-radius: 14px; background: #213f34; }
.oracle-dialog-form label { display: block; margin-bottom: 9px; color: #f5e8d0; font-size: 12px; font-weight: 800; }
.oracle-dialog-form > div { display: flex; gap: 9px; }
.oracle-dialog-form input { min-width: 0; flex: 1; height: 46px; padding: 0 13px; border: 1px solid #e1d5be; border-radius: 9px; background: #fffdf7; color: #233e34; font-size: 13px; }
.oracle-dialog-form .button { background: #edcf99; color: #243c32; }
.oracle-dialog-form .button:hover { background: #f5dba9; }
.tarot-deck-label { display: block; margin: 7px 0 7px; color: #f2dfbd; font-size: 11px; font-weight: 800; }
.tarot-self-select { width: min(100%, 390px); min-height: 44px; padding: 0 12px; border: 1px solid #d9c69e; border-radius: 9px; background: #fffaf0; color: #254438; font-size: 13px; }
.tarot-saved-note { display: inline-block; padding: 10px 13px; border: 1px solid #c8b98b; border-radius: 100px; color: #f7e5be; font-size: 12px; font-weight: 800; }
.spread-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 16px 0; }
.spread-picker button { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px; border: 1px solid #dfd3bc; border-radius: 12px; background: #fffaf0; color: #385448; text-align: left; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.spread-picker button:hover { transform: translateY(-2px); box-shadow: 0 6px 15px #142c211c; }
.spread-picker button.active { border: 2px solid #c98a70; padding: 11px; background: #fff2e6; box-shadow: 0 0 0 3px #e7bca458; }
.spread-picker b { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 10px; background: #e7d3b1; color: #77584a; font-size: 13px; letter-spacing: -.12em; }
.spread-picker span { display: grid; gap: 3px; }
.spread-picker strong { font-size: 12px; }
.spread-picker small { color: #718076; font-size: 10px; line-height: 1.35; }
.tarot-self-hero .spread-picker { max-width: 470px; }
.reading-result { margin: 20px 0; padding: 24px; border: 1px solid #e5d8c3; border-radius: 17px; background: #fffaf1; box-shadow: 0 8px 25px #533e2010; }
.reading-result-head { margin-bottom: 19px; }
.reading-result-head h2 { margin: 7px 0 4px; color: #263f35; font: 34px/1.1 Georgia, serif; }
.reading-result-head p { margin: 0; color: #748074; font-size: 12px; line-height: 1.5; }
.reading-cards { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; gap: 14px; }
.reading-cards-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.reading-card { min-width: 0; padding: 17px; border: 1px solid #e6d9c5; border-radius: 14px; background: #fffdf8; text-align: center; }
.reading-position { display: block; margin-bottom: 13px; color: #aa715c; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.reading-card > img, .reading-card > .oracle-face { display: block; width: min(100%, 205px); height: 315px; margin: auto; object-fit: contain; border: 5px solid #f9edda; border-radius: 8px; box-shadow: 5px 6px 0 #bb826d; }
.reading-card > .oracle-face { display: flex; }
.reading-card h3 { margin: 20px 0 8px; color: #2c493b; font: 24px/1.1 Georgia, serif; }
.reading-card p { max-width: 36ch; margin: 0 auto; color: #586a5d; font-size: 12px; line-height: 1.55; }
.oracle-modal .reading-result { margin: 0; padding: 17px; }
.oracle-modal .reading-result-head h2 { font-size: 29px; }
.oracle-modal .reading-card > img, .oracle-modal .reading-card > .oracle-face { width: min(100%, 175px); height: 260px; }
@media (max-width: 750px) {
  .modal.oracle-modal { width: 100%; max-height: 96dvh; border-radius: 22px 22px 0 0; }
  .oracle-modal .modal-header { padding: 18px 17px 15px; }
  .oracle-modal .modal-content { padding: 16px 15px calc(24px + env(safe-area-inset-bottom)); }
  .oracle-dialog-tabs { display: flex; width: 100%; }
  .oracle-dialog-tabs button { flex: 1; padding: 8px 5px; font-size: 11px; }
  .oracle-dialog-browser { display: flex; flex-direction: column; gap: 14px; }
  .oracle-dialog-browser .oracle-dialog-detail { order: -1; }
  .oracle-dialog-list { width: 100%; max-height: 260px; padding-right: 4px; }
  .oracle-dialog-detail, .oracle-dialog-welcome { width: 100%; grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 17px; }
  .oracle-dialog-card-image, .oracle-dialog-art .oracle-face { width: min(66vw, 250px); max-height: 350px; }
  .oracle-dialog-art .oracle-face { height: 350px; }
  .oracle-dialog-reading h3 { margin-top: 8px; font-size: 33px; }
  .oracle-dialog-message { padding: 17px; }
  .oracle-dialog-message p { font-size: 18px; }
  .oracle-dialog-form > div { flex-direction: column; }
  .oracle-dialog-form .button { min-height: 45px; }
  .spread-picker { gap: 7px; }
  .spread-picker button { min-height: 92px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 9px; }
  .spread-picker button.active { padding: 8px; }
  .spread-picker b { width: 30px; height: 30px; font-size: 10px; }
  .spread-picker strong { font-size: 11px; }
  .spread-picker small { font-size: 9px; }
  .reading-result { padding: 16px; }
  .reading-result-head h2 { font-size: 28px; }
  .reading-cards-three { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 7px 12px 2px; }
  .reading-cards-three .reading-card { flex: 0 0 min(78vw, 260px); scroll-snap-align: center; }
  .reading-card > img, .reading-card > .oracle-face { height: 290px; }
  .oracle-modal .reading-result { padding: 12px; }
  .oracle-modal .reading-cards-three .reading-card { flex-basis: min(72vw, 240px); }
}
@media (max-width: 750px) {
  .oracle-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .oracle-cover { height: 205px; }
  .oracle-cover-name { font-size: 21px; }
  .oracle-library { padding: 17px 13px; }
  .oracle-library-head { align-items: flex-start; flex-direction: column; }
  .oracle-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oracle-library-detail { gap: 14px; padding: 14px; }
  .oracle-library-image .oracle-face, .oracle-library-image .tarot-revealed, .oracle-library-image .oracle-revealed { width: 95px; height: 160px; }
  .oracle-library-image .oracle-face .oracle-symbol { max-height: 76px; }
  .oracle-library-image .oracle-face-name { font-size: 13px; }
  .oracle-library-detail h3 { font-size: 20px; }
  .oracle-library-detail p { font-size: 12px; }
  .oracle-face { width: min(65vw, 220px); height: min(106vw, 365px); }
  .oracle-revealed { width: min(65vw, 220px); }
}
@media (prefers-reduced-motion: reduce) { .oracle-deck-choice { transition: none; } }
.bottom-nav button .bottom-nav-label { font-size: 9px; line-height: .9; text-align: center; }
@media (max-width: 390px) {
  .modal-content .type-picker label { font-size: 10px; gap: 4px; }
  .modal-actions .right { gap: 6px; }
  .modal-actions .button { padding-left: 10px; padding-right: 10px; font-size: 11px; }
}
@media (max-width: 430px) {
  .modal-content .form-grid { grid-template-columns: 1fr; }
  .modal-content .form-grid > .field, .modal-content .form-grid > .full { grid-column: 1; }
}