* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0b1026;
  --bg2: #111834;
  --panel: #161e3f;
  --card: #1b2447;
  --card-hover: #232d58;
  --line: #2a3565;
  --text: #e8eaf6;
  --muted: #9aa3c7;
  --gold: #e8c56a;
  --accent: #f0d488;
}

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: radial-gradient(ellipse at 70% -10%, #1a2450 0%, var(--bg) 55%);
  color: var(--text);
}

#sidebar {
  width: 270px;
  min-width: 270px;
  background: rgba(10, 14, 32, 0.75);
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  overflow-y: auto;
}

.brand h1 { font-size: 20px; color: var(--gold); letter-spacing: 1px; }
.brand-moons { text-align: center; font-size: 15px; letter-spacing: 4px; margin-bottom: 6px; }
.brand-sub { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }

.cycle-label { display: block; margin: 16px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.user-row { display: flex; gap: 6px; }
.user-row select { flex: 1; min-width: 0; }
.btn-icon { padding: 6px 9px; font-size: 14px; line-height: 1; }
#cycleSel {
  width: 100%; padding: 6px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); margin-bottom: 10px;
}

.btn {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer; font-size: 13px;
}
.btn:hover { background: var(--card-hover); }
.btn-accent { background: linear-gradient(135deg, #caa64f, #a8842f); border-color: #e8c56a55; color: #14100a; font-weight: 600; width: 100%; }

#moonNav { margin-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.moon-btn {
  text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text); cursor: pointer; font-size: 13px; line-height: 1.3;
}
.moon-btn:hover { background: var(--card); }
.moon-btn.active { background: var(--card-hover); border-color: var(--gold); }
.moon-btn .num { color: var(--gold); font-weight: 700; margin-right: 6px; }
.moon-btn .nm { display: block; font-size: 12px; color: var(--muted); }
.moon-btn.dft .num { color: #c9a0dc; }
.sidebar-foot { margin-top: 18px; font-size: 11px; color: var(--muted); word-break: break-all; }

#main { flex: 1; overflow-y: auto; padding: 22px 28px 40px; }

#lunaHeader { margin-bottom: 18px; }
.lh-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#lunaTitle { font-size: 26px; color: var(--accent); }
#lunaMeta { color: var(--muted); margin-top: 4px; font-size: 14px; }
#seasonChip {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  white-space: nowrap; color: #10142c;
}
#lunaDesc { margin-top: 10px; max-width: 900px; line-height: 1.55; color: #cdd3ee; font-style: italic; }

#phaseChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 11px; font-size: 13px;
}
.chip b { color: var(--gold); }

.dow-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.dow-row div { text-align: center; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }

#grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }

.day-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  min-height: 108px; padding: 8px 9px; cursor: pointer; position: relative;
  transition: transform .08s, background .08s;
  min-width: 0;
}
.day-card:hover { background: var(--card-hover); transform: translateY(-1px); }
.day-card.today { outline: 2px solid var(--gold); }
.day-card .dc-head { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.day-card .dc-n { font-weight: 700; color: var(--gold); font-size: 15px; flex: 0 0 auto; }
.day-card .dc-phases { flex: 1 1 auto; text-align: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.day-card .dc-date { font-size: 12px; color: var(--muted); flex: 0 0 auto; margin-left: auto; }
.day-card .dc-sun { font-size: 11.5px; color: #ffd98a; margin-top: 4px; white-space: nowrap; }
.day-card .dc-tide { font-size: 11.5px; color: #8fc7e8; margin-top: 2px; }
.day-card .dc-note { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-card.today { outline: 2px solid var(--gold); }
.dc-phase {
  font-size: 15px;
  filter: drop-shadow(0 0 4px #ffffff88);
}
.dc-clima { font-size: 11px; color: #b8c4e8; margin-top: 3px; }

#monthNoteWrap { margin-top: 18px; }
#monthNoteWrap label { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
textarea {
  width: 100%; max-width: 1100px; margin-top: 6px; background: var(--bg2);
  color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font-family: inherit; font-size: 13px; resize: vertical;
}

.actions-toolbar { display:flex; gap:10px; align-items:center; margin-top:16px; }
#actionSearch { flex:1; max-width:420px; padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:13px; }
#actionSearch:focus { outline:2px solid var(--gold); border-color:var(--gold); }
#actions { margin-top:12px; display:flex; flex-direction:column; gap:10px; max-width:1100px; }
.action-group { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:0; overflow:hidden; }
.action-group[open] { background:var(--card); }
.action-group summary { list-style:none; cursor:pointer; padding:10px 14px; font-weight:700; font-size:13px; color:var(--accent); display:flex; justify-content:space-between; align-items:center; user-select:none; }
.action-group summary::-webkit-details-marker { display:none; }
.action-group summary::after { content:'▸'; color:var(--muted); transition:transform .15s; }
.action-group[open] summary::after { transform:rotate(90deg); }
.group-btns { display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 14px; }
.ag-count { font-weight:400; color:var(--muted); font-size:11px; }
#statusMsg { color: #8fd694; font-size: 13px; margin-left: 4px; }
.btn.hidden-by-search, .btn.hidden-by-config { display:none !important; }

#tidesPanel {
  margin-top: 14px; max-width: 980px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
}
#tidesPanel.hidden { display: none; }
.tp-head { font-size: 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.tp-head .muted { color: var(--muted); font-size: 12px; }
.tides-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tide-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tide-card.today { outline: 2px solid var(--gold); }
.tide-head b { display: block; font-size: 13px; color: var(--gold); }
.tide-head span { font-size: 11.5px; color: var(--muted); }
.tide-mini { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.tide-mini th { text-align: left; color: var(--muted); font-size: 10px; letter-spacing: 1px; padding: 4px 6px; }
.tide-mini td { border-top: 1px solid var(--line); padding: 5px 6px; }
.tide-mini td:first-child { color: #ffd98a; font-weight: 600; }
@media (max-width: 920px) { .tides-3col { grid-template-columns: 1fr; } }

#weatherPanel {
  margin-top: 14px; max-width: 980px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
}
#weatherPanel.hidden { display: none; }
.wp-current { font-size: 15px; margin-bottom: 10px; }
.wp-days { display: flex; gap: 10px; flex-wrap: wrap; }
.wp-day { background: var(--card); border-radius: 8px; padding: 8px 10px; text-align: center; min-width: 86px; font-size: 12px; }
.wp-day .wd-date { color: var(--muted); font-size: 11px; }
.wp-day .wd-ico { font-size: 20px; margin: 3px 0; }
.wp-hours-title { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.wp-hgroup { margin-bottom: 8px; }
.wp-hday { color: var(--gold); font-size: 12.5px; margin-bottom: 4px; }
.wp-hrow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.wp-hrow::-webkit-scrollbar { height: 7px; }
.wp-hour {
  min-width: 62px; flex: 0 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 4px; text-align: center;
}
.wp-hour .hh { color: var(--muted); font-size: 10.5px; }
.wp-hour .hi { font-size: 17px; margin: 2px 0; }
.wp-hour .ht { font-weight: 600; font-size: 12px; }
.wp-hour .hp { color: #8fc7e8; font-size: 10px; }
.wp-hour.now { outline: 1.5px solid var(--gold); }

dialog {
  background: var(--bg2); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 26px; width: 430px;
}
dialog::backdrop { background: rgba(4, 6, 16, 0.7); }
dialog h3 { color: var(--accent); margin-bottom: 2px; }
.muted { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.dlg-quote {
  background: rgba(232, 197, 106, 0.08);
  border-left: 3px solid var(--gold);
  padding: 9px 13px;
  border-radius: 6px;
  font-style: italic;
  color: #ecd9a8;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.dlg-quote .q-a {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
dialog label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
dialog input, dialog textarea {
  display: block; width: 100%; margin-top: 5px; background: var(--card);
  border: 1px solid var(--line); color: var(--text); border-radius: 6px; padding: 7px;
  font-family: inherit;
}
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

#searchBox {
  width: 100%; padding: 7px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); margin-bottom: 4px; font-size: 13px;
}

.day-card .dc-efe {
  font-size: 10.5px; color: var(--gold); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.day-card .dc-mood { margin-left: auto; font-size: 12px; }

.dlg-mood { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mood-btn {
  font-size: 20px; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mood-btn.sel { outline: 2px solid var(--gold); background: var(--card-hover); }
.mood-btn:hover { background: var(--card-hover); }

#ekadashiList .ek-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 8px;
}
#ekadashiList .ek-card.today { outline: 2px solid var(--gold); }
#ekadashiList .ek-card h4 { color: var(--gold); font-size: 14px; }
#ekadashiList .ek-card .ek-meta { font-size: 12px; color: var(--muted); }
#ekadashiIntro ul { margin: 8px 0 8px 18px; }
#ekadashiIntro li { margin-bottom: 4px; }
.ek-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin-left: 6px; }
.ek-badge.shukla { background: #d4a947; color: #10142c; }
.ek-badge.krishna { background: #7a6fa5; color: #e8eaf6; }

#siembraContent .si-card, #siembraHarvestBox .si-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px;
}
#siembraContent .si-card h4, #siembraHarvestBox .si-card h4 { color: var(--accent); margin-bottom: 4px; }
#siembraContent .si-card p, #siembraHarvestBox .si-card p { font-size: 13px; color: #cdd3ee; margin-bottom: 4px; }
#siembraContent .si-card .si-sem, #siembraHarvestBox .si-card .si-sem { color: #8fd694; }
#siembraContent .si-card .si-tar, #siembraHarvestBox .si-card .si-tar { color: #8fc7e8; }
#siembraContent .si-luna-card {
  background: linear-gradient(135deg, var(--panel), var(--card));
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px;
}
#siembraContent .si-luna-card h4 { color: var(--gold); }

.search-hit {
  text-align: left; width: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; cursor: pointer; color: var(--text);
}
.search-hit:hover { background: var(--card-hover); }
.search-hit .sh-where { color: var(--gold); font-size: 12px; }
.search-hit .sh-text { font-size: 13px; color: #cdd3ee; }
#searchResults { max-height: 50vh; overflow-y: auto; margin-bottom: 12px; }
#searchDialog { width: 480px; }

body[data-tema="PUKEM"] { --gold: #9fc2ee; --accent: #b9d4f5; background: radial-gradient(ellipse at 70% -10%, #16294f 0%, #0a0f22 55%); }
body[data-tema="PEWU"] { --gold: #a9d18e; --accent: #c3e0ab; background: radial-gradient(ellipse at 70% -10%, #1c3a2a 0%, #0b1420 55%); }
body[data-tema="WALUNG"] { --gold: #f0d488; --accent: #f7e3ae; background: radial-gradient(ellipse at 70% -10%, #3a3050 0%, #0b1026 55%); }
body[data-tema="RIMU"] { --gold: #e8a06a; --accent: #f2bc8f; background: radial-gradient(ellipse at 70% -10%, #3a2418 0%, #100b16 55%); }

/* Temas manuales - tienen prioridad sobre data-tema */
body[data-theme="noche"] { --bg:#0b1026; --bg2:#111834; --panel:#161e3f; --card:#1b2447; --card-hover:#232d58; --line:#2a3565; --text:#e8eaf6; --muted:#9aa3c7; --gold:#e8c56a; --accent:#f0d488; background: radial-gradient(ellipse at 70% -10%, #1a2450 0%, #0b1026 55%) !important; }
body[data-theme="claro"] { --bg:#f4f1e8; --bg2:#ffffff; --panel:#e8e5dc; --card:#ffffff; --card-hover:#f0ece0; --line:#d5cfc0; --text:#2b2418; --muted:#7a6e5a; --gold:#9a7b2f; --accent:#b8963a; background: radial-gradient(ellipse at 70% -10%, #fffaf0 0%, #f4f1e8 55%) !important; }
body[data-theme="claro"] #sidebar { background: rgba(255,251,240,0.92); }
body[data-theme="claro"] .day-card.today { outline-color: #b8963a; }
body[data-theme="bosque"] { --bg:#0e1a12; --bg2:#16261c; --panel:#1e3526; --card:#243d2e; --card-hover:#2e4d3a; --line:#3a5a44; --text:#e0f0e6; --muted:#8fb8a0; --gold:#a9d18e; --accent:#c3e0ab; background: radial-gradient(ellipse at 70% -10%, #1c3a2a 0%, #0e1a12 55%) !important; }
body[data-theme="oceano"] { --bg:#0a1a2a; --bg2:#102338; --panel:#14304d; --card:#183a5c; --card-hover:#1e4a75; --line:#2a5a8a; --text:#dff0ff; --muted:#8fb8dd; --gold:#7ac8e6; --accent:#a0ddf0; background: radial-gradient(ellipse at 70% -10%, #14304d 0%, #0a1a2a 55%) !important; }
body[data-theme="atardecer"] { --bg:#1a120e; --bg2:#2a1c16; --panel:#3a2418; --card:#4a3020; --card-hover:#5a3d28; --line:#7a4d30; --text:#fde8d0; --muted:#c9a48a; --gold:#f0a060; --accent:#f7c08a; background: radial-gradient(ellipse at 70% -10%, #4a3020 0%, #1a120e 55%) !important; }
body[data-theme="medianoche"] { --bg:#050508; --bg2:#0a0a10; --panel:#141418; --card:#1c1c22; --card-hover:#24242e; --line:#2e2e3a; --text:#f0f0f5; --muted:#9a9aaa; --gold:#e8c56a; --accent:#f0d488; background: #050508 !important; }

#themeSel {
  width: 100%; padding: 6px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--text); margin-bottom: 10px; font-size: 13px;
}

.live-clock {
  margin: 12px 0 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  line-height: 1.2;
}
.live-clock .lc-time { display: block; font-size: 20px; font-weight: 800; color: var(--gold); letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.live-clock .lc-date { display: block; font-size: 11px; color: var(--muted); text-transform: capitalize; margin-top: 2px; }

.conv-grid { display: flex; flex-direction: column; gap: 10px; }
.conv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.conv-row label { flex: 1; min-width: 90px; }
.conv-result { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; text-align: center; font-size: 14px; min-height: 42px; }
.conv-table { margin-top: 12px; overflow-x: auto; }
.conv-ref { width: 100%; border-collapse: collapse; font-size: 11px; }
.conv-ref th, .conv-ref td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; }
.conv-ref th { background: var(--panel); color: var(--gold); font-size: 10px; }
.conv-ref td:first-child { text-align: left; color: var(--text); }

.timer-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.timer-display { font-size: 38px; font-weight: 800; text-align: center; letter-spacing: 2px; color: var(--gold); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; font-variant-numeric: tabular-nums; }
.chrono-laps { margin-top: 10px; max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chrono-lap { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text); }

#convertDialog, #timerDialog, #ekadashiDialog, #siembraDialog, #menstrualDialog, #medicDialog, #habitsDialog, #donateDialog, #helpDialog, #circadianDialog, #goldenDialog, #disciplineDialog, #dreamsDialog, #mealDialog, #shoppingDialog, #breathDialog, #scheduleDialog, #fishingDialog, #gymDialog, #birdsDialog, #astroDialog, #comunaDialog { width: 520px; max-width: 96vw; max-height: 88vh; overflow-y: auto; }
#helpDialog, #disciplineDialog, #dreamsDialog, #breathDialog, #scheduleDialog, #fishingDialog, #birdsDialog, #astroDialog, #comunaDialog, #studyDialog { width: 680px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.help-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.help-card h4 { color: var(--gold); margin-bottom: 6px; font-size: 13px; }
.help-card p { font-size: 13px; color: #cdd3ee; margin-bottom: 6px; line-height: 1.45; }
.discipline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.discipline-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.discipline-card h4 { color: var(--accent); margin-bottom: 6px; font-size: 13px; }
.discipline-card p { font-size: 12px; color: #cdd3ee; margin-bottom: 4px; line-height: 1.45; }
.fishing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fishing-species { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.fishing-species-item { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.4; }
.fishing-species-item b { color: var(--gold); }
.breath-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.breath-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.breath-card.sel { border-color: var(--gold); background: var(--card-hover); outline: 2px solid var(--gold); }
.breath-card b { color: var(--gold); }
.breath-circle { width: 140px; height: 140px; border-radius: 50%; border: 3px solid var(--gold); margin: 12px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 50%, var(--panel), var(--card)); transition: transform 1s ease, background .3s; font-weight: 700; color: var(--gold); }
.breath-circle.inhale { transform: scale(1.12); background: radial-gradient(circle at 50% 50%, var(--card-hover), var(--panel)); }
.breath-circle.exhale { transform: scale(0.88); }
.breath-circle span:first-child { font-size: 14px; }
.breath-circle span:last-child { font-size: 22px; }
.schedule-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.schedule-day { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-height: 90px; }
.schedule-day b { display: block; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.schedule-block { font-size: 11px; padding: 4px 6px; border-radius: 6px; margin-top: 4px; color: #10142c; font-weight: 600; line-height: 1.3; }
.schedule-today { border-color: var(--gold); outline: 1px solid var(--gold); }
#convertDialog .conv-row input, #convertDialog .conv-row select, #timerDialog input, #timerDialog select { font-size: 13px; }

.menstrual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menstrual-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.menstrual-card h4 { color: var(--gold); margin-bottom: 8px; font-size: 13px; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--text); }
.check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.mens-pred-grid { display: flex; flex-direction: column; gap: 8px; }
.mens-pred-item { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.mens-pred-item.period { border-left: 3px solid #e76e8a; }
.mens-pred-item.fertile { border-left: 3px solid #8fd694; }
.mens-pred-item.ovulation { border-left: 3px solid var(--gold); }
.mens-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.mens-dot.period { background: #e76e8a; }
.mens-dot.fertile { background: #8fd694; }
.mens-dot.ovulation { background: var(--gold); }
.mens-history { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mens-hist-item { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font-size: 12px; }
.dc-mens { font-size: 10px; padding: 2px 6px; border-radius: 6px; margin-top: 3px; display: inline-block; font-weight: 600; }
.dc-mens.period { background: #e76e8a22; color: #e76e8a; border: 1px solid #e76e8a55; }
.dc-mens.fertile { background: #8fd69422; color: #8fd694; border: 1px solid #8fd69455; }
.dc-mens.ovulation { background: #e8c56a22; color: #e8c56a; border: 1px solid #e8c56a55; }
.day-card.mens-period { border-color: #e76e8a66; }
.day-card.mens-fertile { border-color: #8fd69466; }
.day-card.mens-ovulation { outline: 1.5px solid #e8c56a; }
.menstrual-details { margin-top: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.menstrual-details summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13px; }
.menstrual-predict { background: linear-gradient(135deg, var(--panel), var(--card)); border-color: var(--gold); }

.hormonal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 11px; color: var(--muted); }
.horm-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.hormonal-tooltip { position: absolute; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 11px; color: var(--gold); pointer-events: none; transform: translateX(-50%); white-space: nowrap; }
.hormonal-tooltip.hidden { display: none; }
.horm-suggest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.horm-suggest-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: #cdd3ee; }
.medic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.medic-form { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.medic-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.medic-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.medic-head b { color: var(--gold); }
.donate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.donate-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.donate-card h4 { color: var(--gold); margin-bottom: 6px; font-size: 13px; }
.donate-bank { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; }
.donate-bank div { display: flex; justify-content: space-between; gap: 8px; }
.circadian-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.circadian-phase { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: center; font-size: 11px; color: var(--muted); }
.circadian-phase.active { border-color: var(--gold); background: var(--card-hover); outline: 1px solid var(--gold); color: var(--text); }
.circadian-phase b { display: block; color: var(--gold); font-size: 12px; margin-bottom: 2px; }
.golden-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.golden-table th, .golden-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; }
.golden-table th { background: var(--panel); color: var(--gold); font-size: 11px; }
.golden-today { background: linear-gradient(135deg, var(--panel), var(--card)); border-color: var(--gold); }
.habits-form { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.habit-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-height: 110px; overflow-y: auto; }
.habit-icon-opt { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); cursor: pointer; transition: transform .1s, background .1s, border-color .1s; user-select: none; }
.habit-icon-opt:hover { background: var(--card-hover); transform: translateY(-1px); }
.habit-icon-opt.sel { background: var(--card-hover); border-color: var(--gold); outline: 2px solid var(--gold); }
.habits-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.habit-item { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.habit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.habit-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid; flex: 0 0 auto; }
.habit-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); margin-top: 4px; }
.habits-today-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; }
.habit-today-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 13px; transition: background .15s; }
.habit-today-item.done { background: var(--card-hover); border-color: var(--gold); }
.habit-today-item input { accent-color: var(--gold); width: 16px; height: 16px; }
.dc-habits { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.dc-habit { font-size: 10px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid; font-weight: 600; }
.dlg-habits { margin: 10px 0; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.dlg-habits:empty { display: none; }
.meal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shopping-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.shop-cat { font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; }
.shop-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.shop-item.done { opacity: 0.6; }
.shop-item.done .shop-name { text-decoration: line-through; }
.shop-name { flex: 1; font-size: 13px; }
.hidden { display: none !important; }

/* Accesibilidad */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
body.large-text { font-size: 17px; }
body.large-text .day-card { min-height: 124px; }
body.large-text #lunaDesc, body.large-text .chip, body.large-text .btn { font-size: 15px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; background:var(--gold); color:#10142c; padding:6px 10px; border-radius:8px; text-decoration:none; }
.skip-link:focus { left:10px; top:10px; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; z-index:9999; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 920px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { flex-direction: column; overflow-y: auto; height: auto; min-height: 100vh; }
  #sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--line); padding: 12px; overflow: visible; }
  .brand h1 { font-size: 17px; }
  .brand-moons { letter-spacing: 2px; }
  #cycleSel, #searchBox { margin-bottom: 8px; }
  #btnToday { width: 100%; }
  .sidebar-foot { display: none; }
  #moonNav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .moon-btn { flex: 0 0 auto; max-width: 210px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 10px; }
  #main { overflow: visible; padding: 10px 6px 70px; }
  #lunaTitle { font-size: 18px; }
  .lh-top { flex-direction: column; gap: 6px; }
  #seasonChip { align-self: flex-start; }
  #lunaDesc { font-size: 13px; }
  #grid, .dow-row { gap: 3px; }
  .day-card { min-height: 78px; padding: 4px; border-radius: 6px; }
  .day-card .dc-head { gap: 2px; }
  .day-card .dc-n { font-size: 11px; }
  .day-card .dc-date { font-size: 8px; }
  .day-card .dc-phases { font-size: 10px; }
  .dc-phase { font-size: 10px; filter: none; }
  .day-card .dc-sun { font-size: 8px; margin-top: 2px; letter-spacing: -0.3px; }
  .day-card .dc-mood { font-size: 9px; }
  .dow-row div { font-size: 7.5px; letter-spacing: 0.3px; }
  #actions { gap: 5px; }
  .btn { font-size: 11.5px; padding: 6px 8px; }
  .yc { width: 20px; height: 20px; font-size: 8px; }
  .gal-item img { width: 96px; height: 72px; }
  .tides-3col { grid-template-columns: 1fr; }
  dialog { width: 94vw; max-width: 430px; }
  .dlg-grid { grid-template-columns: 1fr; }
  .live-clock .lc-time { font-size: 16px; }
  .timer-display { font-size: 28px; }
  .menstrual-grid { grid-template-columns: 1fr; }
  .medic-grid { grid-template-columns: 1fr; }
  .donate-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: 1fr; }
  .discipline-grid { grid-template-columns: 1fr; }
  .config-grid { grid-template-columns: 1fr; }
  .circadian-grid { grid-template-columns: 1fr 1fr; }
  .meal-grid { grid-template-columns: 1fr; }
  .breath-grid { grid-template-columns: 1fr; }
  .schedule-week { grid-template-columns: 1fr; }
  .fishing-grid { grid-template-columns: 1fr; }
}