:root { --ink:#173330; --muted:#6c7d78; --paper:#f7f8f5; --card:#fff; --line:#e3e8e4; --green:#2a9d72; --red:#e75b57; --yellow:#f7c95b; --blue:#5a8dee; }
* { box-sizing:border-box } [hidden] { display:none!important } html,body { max-width:100%; overflow-x:clip } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit } button { cursor:pointer } .app-shell { max-width:820px; margin:auto; padding:30px 20px 56px }.topbar,.section-heading,.modal-header { display:flex; align-items:center; justify-content:space-between }.topbar h1,h2,p { margin:0 }.topbar h1 { font-size:30px; letter-spacing:-1.2px }.eyebrow { color:var(--muted); font-weight:750; font-size:10px; letter-spacing:1.35px; margin-bottom:5px }.icon-button,.close-button { border:0; background:#eaf1ed; color:var(--ink); width:38px; height:38px; border-radius:50%; font-size:24px }.hero { background:var(--ink); color:#fff; border-radius:22px; padding:25px; margin:25px 0 14px; background-image:radial-gradient(circle at 88% 15%,#39706b 0,transparent 30%) }.hero span,.hero small { display:block; color:#b6d0c8 }.hero strong { display:block; font-size:35px; letter-spacing:-1.6px; margin:5px 0 }.actions { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px }.action-card { border:0; min-height:102px; padding:17px; display:flex; align-items:center; gap:12px; text-align:left; border-radius:18px; color:#fff; box-shadow:0 6px 14px #17333017 }.action-card.expense { background:var(--red) }.action-card.income { background:var(--green) }.action-icon { font-size:33px; font-weight:300 }.action-card b,.action-card small { display:block }.action-card small { opacity:.82; margin-top:3px; font-size:12px }.panel { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:21px; margin-top:16px; box-shadow:0 4px 15px #17333008 } h2 { font-size:19px; letter-spacing:-.45px }.chart-controls,.filters { display:flex; gap:10px; margin-top:17px; flex-wrap:wrap } label { display:grid; color:var(--muted); font-size:12px; gap:6px; font-weight:650 } select,input { border:1px solid #d9e1dc; background:#fbfcfa; border-radius:10px; color:var(--ink); padding:10px 11px; min-height:40px; outline-color:var(--green) }.chart-controls select { min-width:135px }.chart-layout { display:grid; grid-template-columns:190px 1fr; align-items:center; gap:25px; padding:22px 0 3px }.donut-wrap { display:grid; place-items:center }.donut { width:180px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#e8eeea 0 100%); position:relative }.donut::after { content:""; position:absolute; inset:27px; border-radius:50%; background:#fff }.donut-center { position:absolute; z-index:1; inset:0; display:grid; place-content:center; text-align:center }.donut-center span { color:var(--muted); font-size:11px }.donut-center b { font-size:17px; letter-spacing:-.5px }.legend { list-style:none; padding:0; margin:0; display:grid; gap:9px; max-height:190px; overflow:auto }.legend li { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:8px; font-size:13px }.swatch { width:10px; height:10px; border-radius:50% }.legend small { color:var(--muted) }.filters > label:not(.search-field) { flex:1; min-width:125px }.search-field { flex:2; min-width:210px; display:flex; align-items:center; border:1px solid #d9e1dc; border-radius:10px; padding-left:11px; background:#fbfcfa; color:var(--muted) }.search-field input { min-width:0; flex:1; border:0; background:transparent }.totals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0 }.totals div { border-radius:12px; padding:12px; background:#f5f7f5 }.totals span,.totals b { display:block }.totals span { font-size:11px; color:var(--muted) }.totals b { margin-top:3px; font-size:15px }.positive { color:var(--green) }.negative { color:var(--red) }.movement-list { border-top:1px solid var(--line) }.movement { display:grid; grid-template-columns:42px 1fr auto 32px; align-items:center; gap:11px; padding:13px 2px; border-bottom:1px solid var(--line) }.movement-badge { width:37px; height:37px; display:grid; place-items:center; border-radius:12px; font-weight:800 }.movement-badge.income { color:var(--green); background:#e5f5ed }.movement-badge.expense { color:var(--red); background:#fde9e8 }.movement-info b,.movement-info small { display:block }.movement-info small { margin-top:2px; color:var(--muted); font-size:11px }.movement-amount { font-size:14px; font-weight:750 }.delete { border:0; background:transparent; font-size:20px; color:#99a7a1; padding:5px }.empty { text-align:center; padding:31px 8px; color:var(--muted); font-size:14px } dialog { border:0; width:min(450px,calc(100% - 32px)); padding:0; border-radius:20px; box-shadow:0 18px 45px #10252248 } dialog::backdrop { background:#10252275 } dialog form { padding:23px; display:grid; gap:14px }.modal-header { margin-bottom:4px }.modal-header h2 { font-size:22px }.save-button { border:0; border-radius:11px; min-height:46px; color:#fff; background:var(--ink); font-weight:750; margin-top:4px }
.backup-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 4px 0 }.backup-panel h2 { font-size:17px }.backup-panel p:not(.eyebrow) { color:var(--muted); font-size:13px; margin-top:5px }.backup-actions { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end }.secondary-button { border:1px solid #cfdad4; background:#fff; color:var(--ink); border-radius:10px; min-height:40px; padding:8px 12px; font-size:12px; font-weight:750 }
@media (max-width:530px) { .app-shell{padding:22px 14px 42px}.chart-layout{grid-template-columns:1fr;gap:18px}.donut{width:170px}.actions{gap:10px}.action-card{padding:13px;min-height:90px}.action-icon{font-size:28px}.panel{padding:17px}.totals div{padding:10px}.totals b{font-size:13px}.backup-panel{align-items:flex-start;flex-direction:column}.backup-actions{justify-content:flex-start}.movement{grid-template-columns:37px minmax(0,1fr) auto}.movement-actions{grid-column:2 / -1;justify-content:flex-end}.movement-info{min-width:0}.movement-info b,.movement-info small{overflow-wrap:anywhere}input,select{font-size:16px;max-width:100%} }
.movement { grid-template-columns:42px 1fr auto auto }.reimbursed-label { color:var(--green)!important; font-weight:700 }.movement-actions { display:flex; align-items:center; gap:3px }.edit,.reimburse { border:0; background:transparent; color:#71847c; padding:5px; font-size:18px }.reimburse { border:1px solid #b9decf; background:#eef9f3; color:#217957; border-radius:8px; font-size:11px; font-weight:750; padding:7px 8px; white-space:nowrap }.reimbursement-info { margin:0; padding:10px 12px; border-radius:10px; background:#eef9f3; color:#217957; font-size:13px; line-height:1.4 }
.archive-intro { color:var(--muted); font-size:13px; margin:13px 0 4px }.archive-list { margin-top:12px; border-top:1px solid var(--line) }.archive-card { width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center; text-align:left; padding:13px 2px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink) }.archive-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:#edf2ef; font-size:17px }.archive-card b,.archive-card small { display:block }.archive-card small,.detail-date { margin-top:3px; color:var(--muted); font-size:12px }.archive-arrow { color:var(--muted); font-size:20px }.archive-detail { padding:23px; max-height:85vh; overflow:auto }.archive-detail h3 { font-size:15px; margin:20px 0 10px }.detail-note { line-height:1.5; font-size:14px; white-space:pre-wrap }.archive-gallery { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px }.archive-gallery img,.file-link { width:92px; height:92px; object-fit:cover; border-radius:10px; border:1px solid var(--line) }.file-link { display:grid; place-items:center; padding:8px; color:var(--ink); text-align:center; font-size:11px; text-decoration:none; background:#f6f8f6 }.timeline { display:grid; gap:9px }.timeline-item { border-left:2px solid var(--green); padding:3px 0 3px 10px }.timeline-item b,.timeline-item small { display:block }.timeline-item b { font-size:13px }.timeline-item small { color:var(--muted); font-size:11px; margin-top:2px }.event-form { display:grid; gap:12px; border-top:1px solid var(--line); padding-top:17px; margin-top:18px }.delete-archive { border:0; background:transparent; color:var(--red); font-weight:700; padding:10px 0; margin-top:16px }
.app-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:20px 0 0; padding:5px; border-radius:14px; background:#e8eeea }.tab-button { border:0; border-radius:10px; min-height:43px; background:transparent; color:var(--muted); font-weight:750 }.tab-button.active { color:var(--ink); background:#fff; box-shadow:0 2px 7px #17333012 }.primary-archive-button { width:100%; border:0; border-radius:13px; min-height:54px; margin:16px 0 4px; background:var(--ink); color:#fff; font-weight:800; font-size:15px }.edit { border:1px solid #cfdad4; background:#fff; color:var(--ink); border-radius:8px; font-size:12px; font-weight:750; padding:7px 9px }

.chart-total { display:flex; align-items:baseline; justify-content:space-between; margin:20px 0 15px; padding:13px 15px; border-radius:13px; background:#f5f7f5 }.chart-total span { color:var(--muted); font-size:12px }.chart-total b { font-size:19px }.category-bars { display:grid; gap:14px; padding:3px 0 5px }.bar-row { display:grid; gap:7px }.bar-label { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:13px }.bar-label span { min-width:0 }.bar-label small { color:var(--muted) }.bar-label b { white-space:nowrap; font-size:13px }.bar-track { height:13px; overflow:hidden; border-radius:999px; background:#edf1ee }.bar-fill { display:block; min-width:4px; height:100%; border-radius:inherit }.bar-fill.income { background:var(--green) }.bar-fill.gasto { background:var(--red) }.movement-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 0 2px }.movement-pagination label { display:flex; align-items:center; gap:8px }.movement-pagination select { min-height:36px; padding:6px 9px }.page-actions { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted) }.page-actions button { min-height:36px; border:1px solid #cfdad4; border-radius:9px; padding:6px 9px; background:#fff; color:var(--ink); font-weight:700 }.page-actions button:disabled { opacity:.45; cursor:not-allowed }.back-to-top { position:fixed; right:18px; bottom:18px; z-index:4; width:48px; height:48px; border:0; border-radius:50%; background:var(--ink); color:#fff; font-size:25px; line-height:1; box-shadow:0 8px 20px #17333040 }
.header-actions { display:flex; gap:8px }.lock-button { font-size:19px }.lock-screen { position:fixed; inset:0; z-index:20; display:grid; place-items:center; min-height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:20px; background:linear-gradient(145deg,#173330,#28584f); color:#fff }.lock-card { width:min(100%,390px); margin:auto; padding:28px; border-radius:24px; background:#fff; color:var(--ink); box-shadow:0 20px 60px #06141266 }.lock-card h1 { margin:2px 0 9px; font-size:28px; letter-spacing:-1px }.lock-card > p:not(.eyebrow) { color:var(--muted); line-height:1.45; font-size:14px }.lock-form { display:grid; gap:14px; width:100%; margin-top:24px }.lock-form input,.lock-form button { width:100%; min-width:0 }.lock-form input { text-align:center; font-size:22px; letter-spacing:8px }.face-button { width:100%; font-size:14px }.lock-feedback { margin-top:14px!important; color:var(--red)!important; font-size:13px!important; font-weight:700 }.app-locked { overflow:hidden }

/* En móvil, los cuadros se desplazan por dentro sin mover ni ampliar la pantalla. */
html { -webkit-text-size-adjust:100% }
html,body { min-height:100% }
button,input,select,textarea { font:inherit }
textarea { border:1px solid #d9e1dc; background:#fbfcfa; border-radius:10px; color:var(--ink); padding:10px 11px; outline-color:var(--green); resize:vertical }
dialog { width:min(450px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overscroll-behavior:contain }
dialog form,.archive-detail { max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.attachment-dialog { width:min(760px,calc(100% - 24px)) }
.attachment-preview { display:grid; gap:14px; padding:23px; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.attachment-preview > img { display:block; max-width:100%; max-height:calc(100dvh - 180px); margin:auto; object-fit:contain; border-radius:10px; background:#f6f8f6 }
.attachment-preview .secondary-button { width:max-content; text-decoration:none }
.attachment-button { width:92px; height:92px; padding:0; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:#f6f8f6 }
.attachment-button img { display:block; width:100%; height:100%; object-fit:cover }
.timeline-item { display:flex; align-items:center; justify-content:space-between; gap:12px }
.edit-event { flex:0 0 auto; border:1px solid #cfdad4; border-radius:8px; padding:6px 8px; background:#fff; color:var(--ink); font-size:11px; font-weight:700 }
.event-actions,.detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px }
.detail-actions { margin-top:16px }.detail-actions .delete-archive { margin-top:0 }
@media (max-width:530px) { input,select,textarea { font-size:16px; max-width:100% } dialog { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; border-radius:0; transform:none } dialog form,.archive-detail,.attachment-preview { height:100%; max-height:none; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); scroll-padding-block:18px } .modal-header { align-items:flex-start; gap:12px } .modal-header h2 { font-size:20px } #archiveForm { grid-template-columns:1fr 1fr; gap:10px } #archiveForm .modal-header,#archiveForm > label:first-of-type,#archiveForm > label:nth-of-type(n+3),#archiveForm .save-button { grid-column:1 / -1 } #archiveForm .save-button,dialog form .save-button { position:sticky; bottom:0; z-index:2; margin-bottom:0; box-shadow:0 -8px 16px #fff } .archive-detail > .modal-header { position:sticky; top:-18px; z-index:2; padding:18px 0 10px; background:#fff; box-shadow:0 8px 12px #fff } .movement-pagination { align-items:flex-start; flex-direction:column } .back-to-top { right:14px; bottom:14px } .lock-screen { display:block; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) }.lock-card { margin:0 auto; padding:24px 20px } }

/* ===== Correcciones de color (las clases reales son "ingreso" y "gasto") ===== */
.movement-badge.ingreso { color:var(--green); background:#e5f5ed }.movement-badge.gasto { color:var(--red); background:#fde9e8 }.bar-fill.ingreso { background:var(--green) }

/* ===== Pestañas: cuatro apartados ===== */
.app-tabs { grid-template-columns:repeat(7,1fr) }
@media (max-width:530px) { .app-tabs { grid-template-columns:repeat(4,1fr) } .app-tabs .tab-button { font-size:13px; padding:0 2px } .tab-button { min-height:40px; font-size:14px } }

/* ===== Categorías editables ===== */
.section-heading { gap:12px }
.dialog-help { color:var(--muted); font-size:13px; line-height:1.45 }
.category-editor { display:grid; gap:9px }.category-editor h3 { margin:6px 0 0; font-size:15px }
.category-rows { display:grid; gap:8px }
.category-row { display:grid; grid-template-columns:1fr auto auto 30px; align-items:center; gap:8px }
.category-row input[type=text] { min-width:0 }
.category-used { color:var(--muted); font-size:11px; white-space:nowrap }
.check-row { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:13px }
.check-row input { min-height:auto; width:18px; height:18px; accent-color:var(--green) }
.check-row.small { font-size:11px; color:var(--muted); gap:5px }
@media (max-width:530px) { .category-row { grid-template-columns:1fr auto 30px } .category-row .check-row { grid-column:1; grid-row:2 } .category-row .category-used { grid-column:2; grid-row:2 } }

/* ===== Período ===== */
.period-hero { background-color:#5b2a4a; background-image:radial-gradient(circle at 88% 15%,#9a4f7f 0,transparent 32%) }
.period-hero span,.period-hero small { color:#f1cde2 }
.action-card.period-start { background:#c2477f }.action-card.period-other { background:#7a5a8c }
.month-nav { display:flex; gap:6px }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px }
.calendar-weekdays { margin-top:16px; color:var(--muted); font-size:11px; font-weight:750; text-align:center }
.calendar-grid { margin-top:7px }
.calendar-day { aspect-ratio:1; border:0; border-radius:50%; background:#f5f7f5; color:var(--ink); font-size:14px; font-weight:650; display:grid; place-items:center; padding:0 }
.calendar-day.blank { background:transparent }
.calendar-day.fertile { background:#dff1fb; color:#215f7d }
.calendar-day.ovulation { background:#5a8dee; color:#fff }
.calendar-day.predicted { background:#fff; color:#c2477f; box-shadow:inset 0 0 0 2px #e79bbd }
.calendar-day.period { background:#c2477f; color:#fff; box-shadow:none }
.calendar-day.today { outline:2px solid var(--ink); outline-offset:2px }
.calendar-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:16px; color:var(--muted); font-size:11px }
.calendar-legend span { display:flex; align-items:center; gap:6px }
.dot { width:11px; height:11px; border-radius:50%; display:inline-block }
.dot.period { background:#c2477f }.dot.predicted { box-shadow:inset 0 0 0 2px #e79bbd }.dot.fertile { background:#dff1fb; box-shadow:inset 0 0 0 1px #9ccbe4 }.dot.ovulation { background:#5a8dee }
.period-stats { margin-bottom:10px }
.period-note { color:var(--muted); font-size:12px; line-height:1.45 }
.movement-badge.period { color:#c2477f; background:#fbe6ef }
.symptom-line { overflow-wrap:anywhere }
.field-hint { color:var(--muted); font-weight:500; font-size:11px }
.symptom-picker { border:0; padding:0; margin:0 }.symptom-picker legend { color:var(--muted); font-size:12px; font-weight:650; margin-bottom:6px; padding:0 }

/* ===== Chips (síntomas y filtros) ===== */
.chips { display:flex; flex-wrap:wrap; gap:7px }
.chip { display:block; position:relative }
.chip input { position:absolute; opacity:0; pointer-events:none }
.chip span,.chip-button { display:inline-flex; align-items:center; gap:5px; border:1px solid #cfdad4; border-radius:999px; padding:7px 11px; background:#fff; color:var(--ink); font-size:12px; font-weight:650 }
.chip input:checked + span { background:#c2477f; border-color:#c2477f; color:#fff }
.chip input:focus-visible + span { outline:2px solid var(--green); outline-offset:2px }
.chip-button.active { background:var(--ink); border-color:var(--ink); color:#fff }
.chip-button small { opacity:.7 }
#placeTypeChips { margin-top:14px }

/* ===== Sitios ===== */
.place-card { grid-template-columns:38px 1fr auto }
.place-card small { overflow-wrap:anywhere }
.fav { color:var(--red) }
.status-pill { display:inline-block; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:750; white-space:nowrap; background:#fff4d6; color:#8a6512 }
.status-pill.visitado { background:#e5f5ed; color:#217957 }
.place-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:6px 0 14px; color:var(--muted); font-size:13px }
.stars { color:#e0a613; letter-spacing:1px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form-row > label { min-width:0 }
.star-input { display:flex; gap:2px; min-height:40px; align-items:center }
.star { border:0; background:transparent; font-size:26px; line-height:1; color:#d6ddd9; padding:2px }
.star.on { color:#e0a613 }
.link-button { display:inline-flex; align-items:center; text-decoration:none }
.photo-thumb { position:relative; width:72px; height:72px }
.photo-thumb img { width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid var(--line) }
.photo-remove { position:absolute; top:-6px; right:-6px; width:24px; height:24px; border-radius:50%; border:0; background:var(--red); color:#fff; font-size:15px; line-height:1; padding:0 }
#placeExistingPhotos:empty { display:none }
@media (max-width:530px) { .form-row { grid-template-columns:1fr 1fr } .star { font-size:24px } }
dialog form { overflow-x:hidden }
.form-row input,.form-row select { width:100%; min-width:0 }
.period-item,.period-item:is(.movement) { grid-template-columns:42px minmax(0,1fr) auto }
@media (max-width:530px) { .period-item { grid-template-columns:37px minmax(0,1fr) auto } .period-item .movement-actions { grid-column:auto } }

/* ==========================================================
   COLORES POR APARTADO  (Período conserva sus colores)
   ========================================================== */
body { --accent:#5f73b3; --accent-2:#7aa9b8; --accent-ink:#36426e; --tint:#f5f6fa; --soft:#e6e9f2; background:var(--tint); transition:background-color .35s ease }
body[data-view="balance"] { --accent:#5f73b3; --accent-2:#7aa9b8; --accent-ink:#36426e; --tint:#f5f6fa; --soft:#e4e8f2 }
body[data-view="archive"] { --accent:#c98a5e; --accent-2:#d8b47a; --accent-ink:#76492b; --tint:#fbf7f2; --soft:#f2e6d8 }
body[data-view="places"]  { --accent:#5c9890; --accent-2:#86b4c6; --accent-ink:#2f5d5a; --tint:#f3f8f7; --soft:#dfecea }
body[data-view="events"]  { --accent:#7f9a72; --accent-2:#b9b07c; --accent-ink:#45573d; --tint:#f6f7f1; --soft:#e5e9dc }
body[data-view="couple"]  { --accent:#a65f6f; --accent-2:#d4a28e; --accent-ink:#6b3441; --tint:#fbf6f6; --soft:#f1e2e2 }
body[data-view="history"] { --accent:#b07a6e; --accent-2:#c9a08f; --accent-ink:#6b443b; --tint:#faf6f4; --soft:#efe3de }
body[data-view="period"]  { --accent:#c2477f; --accent-2:#7a5a8c; --accent-ink:var(--ink); --tint:var(--paper); --soft:#e8eeea }

/* Cabecera y pestañas */
.topbar h1 { color:var(--accent-ink); transition:color .35s }
.topbar .eyebrow { color:var(--accent) }
.app-tabs { background:var(--soft); transition:background-color .35s }
.tab-button.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent) }
.icon-button { background:var(--soft); color:var(--accent-ink) }

/* Tarjeta principal de cada apartado (no la de Período) */
.hero:not(.period-hero) { background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%); box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 28%,transparent) }
.hero:not(.period-hero) span,.hero:not(.period-hero) small { color:#ffffffd9 }

/* Mi balance: ingresos/gastos más vivos */
body[data-view="balance"] .action-card.expense { background:linear-gradient(135deg,#cf6f6f,#dd9690) }
body[data-view="balance"] .action-card.income { background:linear-gradient(135deg,#5e9e82,#86bba0) }
body[data-view="balance"] .panel { border-color:#e3e6ee }
body[data-view="balance"] .panel .eyebrow,body[data-view="balance"] .backup-panel .eyebrow { color:var(--accent) }
body[data-view="balance"] .chart-total,body[data-view="balance"] .totals div { background:#f1f3f8 }
body[data-view="balance"] .bar-track { background:#eceef4 }

/* Notas y Sitios */
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .panel { border-color:color-mix(in srgb,var(--accent) 22%,#fff) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .panel .eyebrow { color:var(--accent) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .primary-archive-button { background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .archive-icon { background:var(--soft) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .chip-button.active { background:var(--accent); border-color:var(--accent) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .timeline-item { border-left-color:var(--accent) }
.archive-card.pinned { background:linear-gradient(90deg,color-mix(in srgb,var(--accent-2) 16%,#fff),transparent) }
.pin-badge { border-radius:999px; padding:5px 9px; font-size:11px; font-weight:750; background:var(--accent); color:#fff }
#noteTypeChips { margin-top:14px }

/* Diálogos con el color del apartado activo */
body:not([data-view="period"]) dialog .save-button { background:linear-gradient(135deg,var(--accent),var(--accent-2)) }
body:not([data-view="period"]) dialog .eyebrow { color:var(--accent) }
input:focus,select:focus,textarea:focus { outline-color:var(--accent) }
.back-to-top { background:var(--accent) }

/* Visor de adjuntos */
.viewer-stage { position:relative; display:grid; place-items:center; min-height:200px; background:#10201e; border-radius:12px; overflow:hidden }
.viewer-stage img { display:block; max-width:100%; max-height:calc(100dvh - 230px); object-fit:contain }
.viewer-stage iframe { width:100%; height:calc(100dvh - 230px); min-height:320px; border:0; background:#fff }
.viewer-nav { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0; border-radius:50%; background:#ffffffd9; color:#173330; font-size:26px; line-height:1; box-shadow:0 4px 12px #0003; z-index:1 }
.viewer-nav.prev { left:10px }.viewer-nav.next { right:10px }
.attachment-preview > img { display:none }
.file-tile { display:grid; place-items:center; align-content:center; gap:4px; padding:6px; text-align:center }
.file-icon { font-size:26px }.file-name { font-size:10px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:80px }
.timeline-item .archive-gallery { margin-top:8px }.timeline-item .attachment-button { width:64px; height:64px }
.photo-thumb .attachment-button { width:72px; height:72px }
.note-category-row { grid-template-columns:56px 1fr auto 30px }
.emoji-input { text-align:center; font-size:20px; padding:6px }
@media (max-width:530px) { .note-category-row { grid-template-columns:52px 1fr 30px } .note-category-row .category-used { grid-column:2; grid-row:2 } .viewer-stage img { max-height:calc(100dvh - 260px) } }
.places-hero { margin-top:25px }
.filters input,.filters select { width:100%; min-width:0 }
@media (max-width:530px) { .attachment-dialog { width:100%; max-width:none } .viewer-stage { min-height:260px } }

/* Sombras y brillos más suaves en todo */
.hero:not(.period-hero) { box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 16%,transparent) }
.tab-button.active { box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 20%,transparent) }
body:is([data-view="archive"],[data-view="places"],[data-view="events"],[data-view="history"],[data-view="couple"]) .primary-archive-button { box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 18%,transparent) }
.action-card { box-shadow:0 5px 12px #1733300f }
.positive { color:#3f8f6c }.negative { color:#c0605f }
.bar-fill.gasto { background:#d98a87 }.bar-fill.ingreso { background:#79b498 }
.movement-badge.ingreso { color:#3f8f6c; background:#e7f2ec }.movement-badge.gasto { color:#c0605f; background:#f8eaea }
.pin-badge { background:color-mix(in srgb,var(--accent) 85%,#fff) }

/* ===== Eventos ===== */
.count-pill { display:inline-block; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:750; white-space:nowrap; background:var(--soft); color:var(--accent-ink) }
.count-pill.today { background:var(--accent); color:#fff }
.count-pill.soon { background:#f3e7cf; color:#7a5a21 }
.count-pill.past { background:#eceeec; color:var(--muted) }
.event-card small + small { margin-top:1px }
.event-block { margin-top:22px; padding-top:16px; border-top:1px solid var(--line) }
.block-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap }
.block-head h3 { margin:0!important; font-size:15px }
.block-head small { color:var(--muted); font-size:12px }
.progress { height:8px; border-radius:999px; background:#eceee8; overflow:hidden; margin:10px 0 4px }
.progress span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .3s }
.progress span.over { background:#d98a87 }
.edit-rows { display:grid; gap:7px; margin-top:10px }
.edit-row { display:grid; align-items:center; gap:7px }
.edit-row input,.edit-row select { min-width:0; width:100%; min-height:38px; padding:7px 9px }
.guest-row { grid-template-columns:1fr 118px 62px 30px }
.guest-row.confirmado select { background:#e9f2ec; color:#3f7a5f }
.guest-row.no select { background:#f6ecec; color:#a05a5a }
.guest-row.no input[data-field=name] { color:var(--muted); text-decoration:line-through }
.plus-field { display:flex; align-items:center; gap:3px; color:var(--muted); font-size:13px }
.plus-field input { padding:7px 5px; text-align:center }
.task-row { grid-template-columns:22px 1fr 30px }
.task-row input[type=checkbox] { width:20px; height:20px; min-height:0; accent-color:var(--accent) }
.task-row.done input[type=text] { color:var(--muted); text-decoration:line-through }
.expense-row { grid-template-columns:1fr 84px auto 30px }
.balance-link { border:1px solid #cfdad4; background:#fff; color:var(--ink); border-radius:8px; padding:7px 8px; font-size:11px; font-weight:750; white-space:nowrap }
.balance-link.linked { background:#e9f2ec; color:#3f7a5f; border-color:#cfe3d7 }
.add-row { display:flex!important; gap:7px; padding:0!important; margin-top:9px }
.add-row input { flex:1; min-width:0 }
.add-row input[type=number] { flex:0 0 84px }
.event-detail .detail-actions { margin-top:18px }
@media (max-width:530px) {
  .guest-row { grid-template-columns:1fr 62px 30px } .guest-row select { grid-column:1 / -1; grid-row:2 }
  .expense-row { grid-template-columns:1fr 80px 30px } .expense-row .balance-link { grid-column:1 / -1; grid-row:2; justify-self:start }
}
@media (max-width:530px) {
  .guest-row { grid-template-columns:minmax(0,1fr) 112px 48px 26px; gap:5px }
  .guest-row select { grid-column:auto; grid-row:auto; padding:7px 4px 7px 8px }
  .plus-field { gap:0 }.plus-field input { padding:7px 2px }
  .edit-row .delete { padding:2px }
}

@media (min-width:531px) and (max-width:700px) { .tab-button { font-size:13px } }

/* ===== Presupuesto por categorías (Eventos) ===== */
.budget-cats { display:grid; gap:9px; margin-top:10px }
.budget-cat { border:1px solid var(--line); border-radius:13px; background:#fbfcfa; overflow:hidden }
.budget-cat[open] { background:#fff; border-color:color-mix(in srgb,var(--accent) 30%,#fff) }
.budget-cat summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:30px 1fr auto 16px; align-items:center; gap:8px; padding:11px 12px }
.budget-cat summary::-webkit-details-marker { display:none }
.cat-icon { font-size:20px; text-align:center }
.cat-name { font-weight:750; font-size:14px; min-width:0; overflow-wrap:anywhere }
.cat-name small { display:block; color:var(--muted); font-weight:500; font-size:11px }
.cat-amounts { font-weight:750; font-size:13px; white-space:nowrap }
.cat-amounts small { color:var(--muted); font-weight:500 }
.cat-chevron { color:var(--muted); font-size:18px; transition:transform .2s }
.budget-cat[open] .cat-chevron { transform:rotate(90deg) }
.progress.small { grid-column:1 / -1; height:5px; margin:2px 0 0; display:block }
.cat-body { padding:4px 12px 12px; border-top:1px dashed var(--line) }
.cat-edit { grid-template-columns:52px 1fr 104px 30px; margin-top:9px }
.cat-empty { color:var(--muted); font-size:12px; margin:6px 0 }
#budgetCatAddForm .emoji-input { flex:0 0 52px }
#budgetCatAddForm input[type=number] { flex:0 0 76px }
@media (max-width:530px) { .cat-edit { grid-template-columns:48px 1fr 30px } .cat-budget-field { grid-column:1 / -1; grid-row:2 } }

/* ===== Histórico ===== */
.action-card.history-noon { background:linear-gradient(135deg,#d9a46e,#e6c48f) }
.action-card.history-night { background:linear-gradient(135deg,#6f7896,#9a9fb8) }
.action-card .action-icon { font-size:28px }
.weekday-chips { margin-top:14px }
.history-stats { margin:14px 0 6px }
.history-list { display:grid; gap:9px; margin-top:10px }
.history-day { display:grid; grid-template-columns:62px 1fr 1fr; gap:8px; align-items:stretch }
.history-date { display:grid; align-content:center; justify-items:center; border-radius:12px; background:var(--soft); color:var(--accent-ink); padding:8px 4px }
.history-date b { font-size:22px; line-height:1 }
.history-date span { font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:.4px; margin-top:4px }
.history-day.weekend .history-date { background:color-mix(in srgb,var(--accent) 22%,#fff) }
.history-day.is-today .history-date { background:var(--accent); color:#fff }
.slot-cell { display:grid; align-content:start; gap:3px; text-align:left; border:1px solid var(--line); border-radius:12px; background:#fff; padding:9px 10px; color:var(--ink); min-width:0 }
.slot-label { font-size:10px; font-weight:750; color:var(--muted); text-transform:uppercase; letter-spacing:.5px }
.slot-weather { display:flex; align-items:center; gap:6px }.slot-icon { font-size:22px }.slot-weather b { font-size:17px }
.slot-cell small { color:var(--muted); font-size:11px }
.slot-comment { font-size:12px; color:var(--ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere }
.empty-slot { border-style:dashed; background:transparent; align-content:center }
.slot-add { color:var(--accent); font-size:12px; font-weight:750 }
.weather-chip.active { background:var(--accent)!important; border-color:var(--accent)!important; color:#fff }
#historyCityForm { flex-wrap:wrap }
#historyCityForm input { flex:1 1 160px }
@media (max-width:530px) { .history-day { grid-template-columns:52px 1fr 1fr; gap:6px } .slot-cell { padding:8px } .slot-icon { font-size:20px } .slot-weather b { font-size:15px } }

.cat-budget-field { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted) }
.cat-budget-field input { flex:1; min-width:0 }
.cat-edit { grid-template-columns:52px 1fr 190px 30px }
@media (max-width:530px) { .cat-edit { grid-template-columns:48px 1fr 30px } }
.history-hero strong { font-size:26px; letter-spacing:-.8px; line-height:1.2 }
.history-date span { font-size:11px }

/* Siempre tema claro (evita ventanas negras si el navegador está en modo oscuro) */
:root { color-scheme:light }
dialog { background:#fff; color:var(--ink) }

/* ===== Histórico de importes ===== */
.history-day { grid-template-columns:62px 1fr 1fr }
.history-day-foot { grid-column:2 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); padding:0 2px 4px }
.history-day-foot b { color:var(--ink); font-size:14px; margin-left:4px }
.slot-amount { font-size:17px; letter-spacing:-.3px }
.slot-weather { font-size:12px; color:var(--muted); gap:4px }
.post-button { border:1px solid color-mix(in srgb,var(--accent) 40%,#fff); background:#fff; color:var(--accent-ink); border-radius:999px; padding:6px 11px; font-size:11px; font-weight:750 }
.post-button.posted { background:#e9f2ec; border-color:#cfe3d7; color:#3f7a5f }
.history-fill { background:linear-gradient(90deg,var(--accent),var(--accent-2)) }
.history-bars { margin-top:14px }
.sub-title { font-size:14px; margin:22px 0 0 }
.history-post-settings { margin-top:12px }
.primary-archive-button:disabled { opacity:.55; cursor:default }
@media (max-width:530px) { .history-day { grid-template-columns:52px 1fr 1fr } .history-day-foot { grid-column:1 / -1 } .slot-amount { font-size:15px } }

.slot-afternoon { font-size:11px; font-weight:700; color:var(--accent-ink) }
.amount-hint { margin:-6px 0 0 }
.amount-hint.negative { color:#c0605f }

/* ===== Botón Salir ===== */
.exit-button { border:1px solid color-mix(in srgb,var(--accent) 35%,#fff); background:#fff; color:var(--accent-ink); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:750; min-height:38px }

/* ===== Histórico: botones de tiempo ===== */
.weather-tags { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.weather-tag { display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; border:1px solid #d9e1dc; border-radius:12px; background:#fff; color:var(--ink); font-weight:700; font-size:14px }
.weather-tag span { font-size:20px }
.weather-tag.active { background:color-mix(in srgb,var(--accent) 16%,#fff); border-color:var(--accent); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent) }

/* ===== Histórico: calendario tipo billete de avión ===== */
.fare-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:7px }
.fare-day { position:relative; display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; min-height:64px; padding:5px 2px 4px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink); min-width:0 }
.fare-day.blank { border:0; background:transparent }
.fare-num { font-size:11px; font-weight:700; color:var(--muted); justify-self:start; padding-left:4px }
.fare-amount { font-size:14px; font-weight:800; letter-spacing:-.4px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fare-tags { font-size:11px; line-height:1; min-height:11px; letter-spacing:-2px }
.fare-day.empty .fare-amount { color:#c9cfcb; font-weight:500; font-size:16px }
.fare-day.future { background:transparent; border-style:dashed; opacity:.45 }
.fare-day.weekend:not(.full):not(.partial) { background:#fbf8f6 }
.fare-day.partial { background:#fff; border-style:dashed; border-color:var(--accent) }
.fare-day.partial .fare-amount { color:var(--muted) }
.fare-day.full.level-1 { background:color-mix(in srgb,var(--accent) 12%,#fff) }
.fare-day.full.level-2 { background:color-mix(in srgb,var(--accent) 22%,#fff) }
.fare-day.full.level-3 { background:color-mix(in srgb,var(--accent) 34%,#fff) }
.fare-day.full.level-4 { background:color-mix(in srgb,var(--accent) 48%,#fff) }
.fare-day.full .fare-num { color:var(--accent-ink) }
.fare-day.today { box-shadow:0 0 0 2px var(--accent-ink) }
.fare-key { display:inline-block; width:14px; height:11px; border-radius:3px; border:1px dashed var(--accent) }
@media (max-width:530px) { .fare-grid { gap:4px } .fare-day { min-height:58px; border-radius:9px } .fare-amount { font-size:12px } .fare-num { font-size:10px; padding-left:2px } }

/* ===== Selector de mes y año ===== */
.month-title-button { border:0; background:transparent; padding:2px 0; font:inherit; color:inherit; letter-spacing:inherit; display:inline-flex; align-items:center; gap:6px; cursor:pointer }
.month-title-button::after { content:"▾"; font-size:14px; color:var(--accent); }
.month-title-button:hover,.month-title-button:focus-visible { color:var(--accent-ink); text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:4px }
.month-picker { width:min(380px,calc(100% - 24px)) }
.month-picker-body { padding:22px; display:grid; gap:14px }
.picker-year { display:grid; grid-template-columns:38px 1fr 38px; gap:8px; align-items:center }
.picker-year select { text-align:center; font-weight:750; font-size:17px }
.picker-year .icon-button:disabled { opacity:.35 }
.picker-months { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.picker-month { display:grid; gap:2px; justify-items:center; padding:12px 4px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink) }
.picker-month b { font-size:15px }
.picker-month small { font-size:11px; color:var(--muted); min-height:13px }
.picker-month.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff }
.picker-month.active small { color:#ffffffd9 }
.picker-month:disabled { opacity:.35; cursor:default }
@media (max-width:530px) { .month-picker { position:fixed; inset:auto 0 0 0; width:100%; height:auto; max-height:85dvh; border-radius:20px 20px 0 0; margin:0 } .month-picker-body { padding-bottom:calc(22px + env(safe-area-inset-bottom)) } }

/* ===== Histórico: resumen de un periodo ===== */
.quick-ranges { margin-top:14px }
.quick-ranges .chip-button.active { background:var(--accent); border-color:var(--accent); color:#fff }
.range-dates { margin-top:12px }
.range-dates input { width:100%; min-width:0 }
.best-worst { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.best-card { display:grid; gap:3px; text-align:left; border:1px solid var(--line); border-radius:13px; background:#fff; padding:12px; color:var(--ink) }
.best-card span { font-size:12px; color:var(--muted); font-weight:700 }
.best-card b { font-size:19px; letter-spacing:-.5px }
.best-card small { font-size:12px; color:var(--muted) }
.best-card.best { background:color-mix(in srgb,var(--accent) 14%,#fff); border-color:color-mix(in srgb,var(--accent) 35%,#fff) }
.best-card:disabled { cursor:default }
.top-days { list-style:none; padding:0; margin:10px 0 0; display:grid; gap:6px }
.top-days button { width:100%; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; background:#fff; padding:9px 11px; text-align:left; color:var(--ink) }
.top-pos { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--soft); color:var(--accent-ink); font-weight:800; font-size:13px }
.top-days li:first-child .top-pos { background:var(--accent); color:#fff }
.top-date { font-size:13px; min-width:0; overflow-wrap:anywhere }
.top-days b { font-size:15px }

@media (min-width:531px) { .tab-button { font-size:14px; padding:0 4px } }

/* ===== Matrimonio ===== */
.couple-hero { position:relative }
.hero-chip { position:absolute; top:18px; right:18px; border:1px solid #ffffff80; background:#ffffff26; color:#fff; border-radius:999px; padding:6px 13px; font-size:12px; font-weight:750 }
.couple-question { font-size:19px; font-weight:750; line-height:1.35; letter-spacing:-.3px; margin:14px 0 4px }
.couple-answers { margin-top:12px }
.couple-answers textarea { width:100% }
.couple-history { margin-top:12px; font-size:13px }
.couple-history summary { cursor:pointer; color:var(--accent-ink); font-weight:700 }
.answer-item { border-left:3px solid var(--accent); padding:4px 0 4px 10px; margin-top:10px }
.answer-item small { color:var(--muted); font-size:11px }
.answer-item b { display:block; font-size:13px; margin:2px 0 }
.answer-item p { margin:2px 0; font-size:13px }
.answer-item p span { color:var(--accent-ink); font-weight:700 }
.couple-gesture { background:var(--soft); border-radius:13px; padding:14px; margin:14px 0 4px; font-size:15px; font-weight:650; line-height:1.4 }
.primary-archive-button.done { background:#e9f2ec!important; color:#3f7a5f; box-shadow:none!important }
.gratitude-list { display:grid; gap:7px; margin-top:12px }
.gratitude-item { display:grid; grid-template-columns:24px 1fr 28px; gap:8px; align-items:start; border-bottom:1px solid var(--line); padding:6px 0 }
.gratitude-item p { margin:0; font-size:14px; line-height:1.4 }
.gratitude-item small { display:block; color:var(--muted); font-size:11px }
.checkin-grid { display:grid; gap:10px; margin-top:14px }
.checkin-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px }
.checkin-label { font-size:14px; font-weight:650 }
.checkin-label small { display:block; color:var(--muted); font-size:11px; font-weight:500 }
.checkin-scale { display:flex; gap:5px }
.checkin-scale button { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font-weight:750 }
.checkin-scale button.on { background:var(--accent); border-color:var(--accent); color:#fff }
.checkin-note { margin-top:12px }
.checkin-note input { width:100% }
#coupleDateChips { margin-top:12px }
.date-list { display:grid; gap:6px; margin-top:12px; max-height:340px; overflow-y:auto }
.date-idea { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:11px; padding:8px 10px; background:#fff }
.date-idea span { font-size:14px }
.date-idea small { display:block; color:var(--muted); font-size:11px }
.date-idea.done span { color:var(--muted) }
.idea-check { width:26px; height:26px; border-radius:50%; border:2px solid color-mix(in srgb,var(--accent) 50%,#fff); background:#fff; color:#fff; font-weight:800; padding:0 }
.date-idea.done .idea-check { background:var(--accent); border-color:var(--accent) }
.upcoming-list { display:grid; gap:7px; margin-top:12px }
.upcoming-item { display:grid; grid-template-columns:30px 1fr auto auto; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px; background:#fff }
.up-icon { font-size:20px; text-align:center }
.upcoming-item b { display:block; font-size:14px }
.upcoming-item small { color:var(--muted); font-size:12px }
.special-add input[type=date] { flex:0 0 150px }
@media (max-width:530px) { .checkin-scale button { width:32px; height:32px } .special-add { flex-wrap:wrap } .special-add input[type=text] { flex:1 1 100% } .special-add input[type=date] { flex:1 } }

/* ===== Matrimonio: compartir ===== */
.heading-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }
.row-actions { display:flex; align-items:center; gap:2px }
.mini-share { border:0; background:transparent; font-size:16px; padding:4px }
.gratitude-item { grid-template-columns:24px 1fr auto }
.received-block { margin-top:6px }
.gratitude-item.received p { color:var(--accent-ink) }
.date-pick { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.share-steps { margin:12px 0 0; padding-left:20px; display:grid; gap:14px }
.share-steps li { font-size:13px; color:var(--muted); line-height:1.45 }
.share-steps li b { color:var(--ink) }
.share-steps .secondary-button { display:block; margin-top:7px }
/* Modo pareja: solo se ve Matrimonio */
body.partner-mode:not(.synced) .app-tabs { display:none }
body.partner-mode.synced #showBalance, body.partner-mode.synced #showArchive { display:none }
body.partner-mode.synced .app-tabs { grid-template-columns:repeat(5,1fr) }
body.partner-mode .share-steps li:first-child { display:none }

/* ===== Momento de cariño ===== */
.affection-card { background:linear-gradient(160deg,#fff 55%,color-mix(in srgb,var(--accent-2) 18%,#fff)) }
.field-label { margin:14px 0 6px; font-size:12px; font-weight:700; color:var(--muted) }
.choice-chips .chip-button.active { background:var(--accent); border-color:var(--accent); color:#fff }
.affection-card .check-row { margin-top:14px }
.affection-preview { margin:10px 0 0; font-size:13px; color:var(--accent-ink); background:var(--soft); border-radius:10px; padding:9px 11px }
.affection-send { font-size:16px }
.affection-status { display:grid; gap:7px }
.signal { display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:9px 11px; background:#fff }
.signal p { margin:0; font-size:13px; color:var(--muted) }
.signal small { display:block; color:var(--accent-ink); font-weight:750; font-size:11px; margin-top:2px }
.signal.active { border-color:color-mix(in srgb,var(--accent) 40%,#fff) }
.signal.theirs.active { background:color-mix(in srgb,var(--accent) 10%,#fff) }
.signal.theirs.active p { color:var(--ink); font-weight:650 }
.affection-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--muted) }

/* ===== Bloques más delimitados por color ===== */
.panel { background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,#fff) 0,#fff 140px); border:1px solid color-mix(in srgb,var(--accent) 22%,#fff); border-top:5px solid color-mix(in srgb,var(--accent) 60%,#fff); box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 9%,transparent); margin-top:18px }
.panel .section-heading h2 { color:var(--accent-ink) }
.panel .eyebrow { color:var(--accent) }
body[data-view="balance"] .backup-panel { margin-top:18px; padding:20px; border-radius:20px; background:color-mix(in srgb,var(--accent) 6%,#fff); border:1px solid color-mix(in srgb,var(--accent) 22%,#fff); border-top:5px solid color-mix(in srgb,var(--accent) 60%,#fff) }
.totals div,.chart-total { background:color-mix(in srgb,var(--accent) 7%,#fff) }

/* ===== Botón Apartados y editor ===== */
.sections-button { padding:8px 13px }
.sections-list { display:grid; gap:10px }
.section-edit { border:1px solid color-mix(in srgb,var(--sec) 30%,#fff); border-left:6px solid var(--sec); border-radius:13px; padding:10px; background:color-mix(in srgb,var(--sec-soft) 55%,#fff); display:grid; gap:9px }
.section-edit.is-hidden { opacity:.5 }
.section-edit-top { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center }
.section-edit-top input[type=text] { min-width:0; width:100%; font-weight:700 }
.move-buttons { display:grid; gap:2px }
.move-buttons button { border:1px solid var(--line); background:#fff; border-radius:6px; font-size:10px; width:30px; height:20px; padding:0; color:var(--ink) }
.move-buttons button:disabled { opacity:.3 }
.swatches { display:flex; flex-wrap:wrap; gap:7px }
.swatch-btn { width:28px; height:28px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #0002; padding:0 }
.swatch-btn.active { box-shadow:0 0 0 2px var(--ink) }
body.partner-mode .sections-button { display:none }
@media (max-width:530px) { .header-actions { gap:6px } .exit-button { padding:7px 11px; font-size:13px } }

body.partner-mode .all-sections-button { display:inline-flex }

/* Período con bloques delimitados (mantiene su rosa) */
body[data-view="period"] .panel .eyebrow { color:#c2477f }
body[data-view="period"] .panel .section-heading h2 { color:#5b2a4a }
body[data-view="period"] .totals div { background:#fbeef4 }
body[data-view="period"] .panel { background:linear-gradient(180deg,#fcf1f6 0,#fff 140px); border-color:#f0d3e1; border-top-color:#d987ad }

/* ===== Historial de la pareja ===== */
.timeline-summary { margin:14px 0 4px }
#coupleTimelineChips { margin-top:12px }
.couple-timeline { margin-top:10px; display:grid; gap:8px }
.timeline-month { font-size:13px; color:var(--accent-ink); margin:12px 0 2px; text-transform:none }
.tl-item { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; border-left:4px solid #d9d3d3 }
.tl-item.mine { border-left-color:var(--accent) }
.tl-item.theirs { border-left-color:var(--accent-2); background:color-mix(in srgb,var(--accent-2) 8%,#fff) }
.tl-item.both { border-left-color:color-mix(in srgb,var(--accent) 50%,var(--accent-2)) }
.tl-icon { font-size:20px; text-align:center; line-height:1.2 }
.tl-item b { display:block; font-size:14px; line-height:1.35 }
.tl-item p { margin:3px 0 0; font-size:13px; color:var(--ink); overflow-wrap:anywhere }
.tl-item small { display:block; margin-top:4px; color:var(--muted); font-size:11px }
.timeline-more { margin-top:10px; width:100% }

/* ===== Matrimonio: barra de hoy y calendario ===== */
.today-bar { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:22px 0 -8px; padding:10px 14px; border-radius:12px; background:var(--soft); color:var(--accent-ink) }
.today-bar b { font-size:15px; text-transform:capitalize }
.today-bar small { color:var(--muted); font-size:12px; flex-basis:100% }
.couple-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:7px }
.cday { min-height:52px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); display:grid; grid-template-rows:auto 1fr; justify-items:center; padding:5px 2px; min-width:0 }
.cday.blank { border:0; background:transparent }
.cday span { font-size:13px; font-weight:700 }
.cday small { font-size:11px; letter-spacing:-2px; line-height:1.4 }
.cday.has { background:color-mix(in srgb,var(--accent) 10%,#fff); border-color:color-mix(in srgb,var(--accent) 30%,#fff) }
.cday.today { box-shadow:0 0 0 2px var(--accent-ink) }
.cday.selected { background:var(--accent); border-color:var(--accent); color:#fff }
.cday.future { opacity:.45 }
.day-detail-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 4px }
.day-detail-head h3 { margin:0; font-size:15px; color:var(--accent-ink) }

/* ===== Mi balance: categorías como botones ===== */
.category-picker { display:grid; gap:6px }
.category-picker .field-label { margin:0 }
.category-buttons { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:7px }
.cat-btn { min-height:44px; border:1px solid #d9e1dc; border-radius:11px; background:#fff; color:var(--ink); font-weight:700; font-size:14px; padding:8px 10px; text-align:center }
.cat-btn.active { background:color-mix(in srgb,var(--accent) 15%,#fff); border-color:var(--accent); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent) }
#movementDialog[data-type="gasto"] .cat-btn.active { background:#f8eaea; border-color:#c0605f; color:#8e3f3e; box-shadow:inset 0 0 0 1px #c0605f }
#movementDialog[data-type="ingreso"] .cat-btn.active { background:#e7f2ec; border-color:#3f8f6c; color:#2c6a50; box-shadow:inset 0 0 0 1px #3f8f6c }

/* Formularios compactos: las filas no se estiran para llenar la pantalla */
dialog form { align-content:start }

/* ---- v40 · Sincronización y notificaciones ---- */
.sync-button { position:relative; white-space:nowrap }
.sync-button.sync-on::after, .sync-button.sync-error::after { content:""; position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50% }
.sync-button.sync-on::after { background:#5aa77c }
.sync-button.sync-error::after { background:#d9822b }
.sync-block { display:grid; gap:10px; margin-top:6px }
.sync-or { margin:8px 0 0; color:var(--muted); font-size:14px; text-align:center }
.sync-field { display:grid; gap:6px; font-weight:700; font-size:14px }
.sync-field input { font-size:18px; letter-spacing:.08em; text-transform:uppercase; text-align:center }
.sync-status { margin:0; padding:10px 12px; border-radius:12px; background:#eaf3ee; color:#2e5b45; font-weight:700 }
.sync-status.is-error { background:#fbf0e4; color:#8a5420 }
.sync-small { margin:0; color:var(--muted); font-size:14px }
.sync-code { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px dashed #c9d3cd; border-radius:12px }
.sync-code span { color:var(--muted); font-size:13px }
.sync-code b { flex:1; font-family:ui-monospace,Menlo,monospace; letter-spacing:.05em; font-size:15px; overflow-wrap:anywhere }
.mini-button { border:1px solid #c9d3cd; background:#fff; border-radius:9px; padding:5px 10px; font-weight:700 }
.sync-title { margin:10px 0 0; font-size:17px }
.sync-kinds { display:grid; gap:2px }
.sync-kind { display:flex; align-items:center; gap:10px; padding:7px 2px; font-size:15px }
.sync-kind input { width:20px; height:20px; flex:none }
.sync-period { padding:10px 12px; border-radius:12px; background:#f7eef3 }
body.period-readonly #periodStartToday, body.period-readonly #periodNewEntry { display:none }
body.period-readonly #periodView [data-period-day], body.period-readonly #periodView [data-edit-period] { cursor:default }
.period-readonly-note { margin:10px 0 0; padding:9px 12px; border-radius:12px; background:#f7eef3 }

/* ---- v41 · Matrimonio ---- */
.signal > div { min-width:0 }
.signal-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center }
.signal-actions.postpone span { font-size:12px; color:var(--muted); font-weight:700; width:100% }
.signal.st-hecho small { color:#2e7d55 } .signal.st-anulado small { color:#a2483f } .signal.st-aplazado small { color:#8a6420 }
.signal.st-anulado p { text-decoration:none }
.emoji-edit { display:grid; gap:6px; width:100% }
.emoji-edit label { display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; font-size:14px }
.emoji-edit input { text-align:center; font-size:20px; padding:6px 4px }
.emoji-edit-button { margin-top:8px }
.affection-legend .field-hint { display:block; width:100%; margin-top:6px }