/* ==========================================================================
   Diosito: calendario minimalista
   ========================================================================== */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --ground: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --ink: #242424;
  --ink-2: #555555;
  --ink-3: #737373;
  --line: rgba(27, 29, 46, 0.10);
  --line-2: rgba(27, 29, 46, 0.18);

  --night: #1b1f3f;
  --night-2: #262b55;
  --night-ink: #ffffff;
  --night-ink-2: #c8c3d9;
  --night-line: rgba(243, 238, 227, 0.13);

  --amber: #e8925a;
  --amber-ink: #8a4318;
  --today: #5a438f;
  --shabat-tint: var(--ground);
  --focus: #7157ad;

  /* Una tonalidad fija por temporada (paleta validada: banda, croma y daltonismo) */
  --s-israel: #7358c7;
  --s-purim: #936fd2;
  --s-pesaj: #6254b8;
  --s-januca: #8064c7;
  --s-menor: #a274bd;
  --s-noraim: #58418e;
  --s-shabat: #473266;
  --s-ayuno: #80728e;
  --s-islamico: #7660bc;
  --s-mexico: #a39c8e;
  --s-trabajo: #2f5d8a;
  --s-personal: #2f7d6b;
  --s-familia: #7a4f8f;
  --s-urgente: #b8432f;

  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -26px rgba(27, 29, 46, .35);

  --veil-1: rgba(255, 255, 255, 0.06);
  --veil-2: rgba(255, 255, 255, 0.10);
  --veil-3: rgba(255, 255, 255, 0.14);
  --veil-4: rgba(255, 255, 255, 0.20);
  --sky-ink: #f6f1e6;

  --sky-top: #1d2350;
  --sky-mid: #3b3770;
  --sky-hz: #c06a5a;

  --ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #171717;
  --surface: #1c1c1c;
  --surface-2: #272727;
  --ink: #eeeeee;
  --ink-2: #c0c0c0;
  --ink-3: #a0a0a0;
  --line: rgba(236, 232, 221, 0.09);
  --line-2: rgba(236, 232, 221, 0.17);
  --night: #0a0d22;
  --night-2: #151937;
  --night-line: rgba(243, 238, 227, 0.10);
  --amber-ink: #f0a877;
  --today: #9b87e0;
  --shabat-tint: var(--ground);
  --focus: #b29aec;
  --s-israel: #a391ee;
  --s-purim: #bb9aef;
  --s-pesaj: #8e8ed6;
  --s-januca: #a68ae4;
  --s-menor: #d0a0e3;
  --s-noraim: #a999ec;
  --s-shabat: #9181bf;
  --s-ayuno: #aaa0b9;
  --s-islamico: #b29aec;
  --s-mexico: #77716a;
  --s-trabajo: #5b8fc4;
  --s-personal: #4fa38e;
  --s-familia: #a57cbd;
  --s-urgente: #e0705c;
  --shadow: 0 18px 40px -26px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ground); }
body { font-family: var(--ui); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
svg { display: block; }
svg:not([fill]) { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
::selection { background: var(--amber); color: #1b1f3f; }
input, textarea { caret-color: var(--focus); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 7px; }
.num, time { font-variant-numeric: tabular-nums; }

/* Grupos de texto */
.bi { display: flex; flex-direction: column; gap: 1px; }
.bi > span:last-child:not([lang]) { font-family: var(--ui); }
.panel-title.bi > span:last-child { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--night-ink-2); }

/* ==========================================================================
   Estructura
   ========================================================================== */
.calendar-app { display: flex; flex-direction: column; height: 100dvh; }
.workspace-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; }

/* ==========================================================================
   Cabecera
   ========================================================================== */
/* La cabecera usa el mismo degradado morado de la bienvenida */
:root { --brand-top: #30234f; --brand-mid: #60477e; --brand-horizon: #b38acb; }
.sky { position: relative; color: var(--sky-ink); padding: 14px 24px;
  background:
    radial-gradient(60% 120% at 50% 130%, color-mix(in srgb, var(--brand-horizon) 55%, transparent) 0%, transparent 70%),
    radial-gradient(50% 160% at 85% -40%, #241a3c 0%, transparent 70%),
    linear-gradient(100deg, var(--brand-top) 0%, var(--brand-mid) 100%); }

.sky-row { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.sky-btn {
  position: relative; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  color: var(--sky-ink); background: var(--veil-2); transition: background .3s var(--ease);
}
.sky-btn:hover { background: var(--veil-4); }
.sky-btn svg { width: 19px; height: 19px; }
.dot-on { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.sky-pill { height: 38px; padding: 0 16px; border-radius: 999px; background: var(--veil-3); color: var(--sky-ink); font-weight: 700; font-size: 14px; }
.sky-pill:hover { background: var(--veil-4); }
.brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--sky-ink); padding: 2px 4px; border-radius: 9px; }
.brand { flex-direction: row; align-items: center; gap: 9px; }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; }
.brand-header-image { width: 58px; height: 58px; object-fit: contain; flex: 0 0 auto; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.brand-date { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: rgba(246, 241, 230, .82); font-weight: 600; white-space: nowrap; }
.period { display: flex; align-items: center; gap: 10px; margin-left: 18px; min-width: 0; }
.nav-arrows { display: flex; gap: 4px; }
.current-period-title { display: flex; align-items: baseline; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.view-switch { display: flex; padding: 3px; border-radius: 999px; background: var(--veil-2); }
.view-switch button { height: 32px; padding: 0 14px; border-radius: 999px; color: rgba(246, 241, 230, .85); font-weight: 600; font-size: 14px; transition: background .3s var(--ease), color .3s var(--ease); }
.view-switch button.on { background: var(--sky-ink); color: #1b1f3f; }
.calendar-system-switch { margin-left: 2px; }
.calendar-system-switch button { padding: 0 12px; }
.theme-toggle-btn .sun-icon { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .sun-icon { display: block; }
:root[data-theme="dark"] .theme-toggle-btn .moon-icon { display: none; }

/* ==========================================================================
   Barra lateral izquierda
   ========================================================================== */
.left-sidebar { overflow-y: auto; padding: 20px 18px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.create-dropdown-container { position: relative; }
.create-pill-btn {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 18px; border-radius: 999px;
  background: var(--night); color: var(--night-ink); font-weight: 700; font-size: 15px; box-shadow: var(--shadow);
  transition: transform .3s var(--ease);
}
.create-pill-btn:active { transform: scale(.98); }
.create-pill-btn svg { width: 20px; height: 20px; }
.create-caret { width: 15px !important; height: 15px !important; margin-left: 4px; transition: transform .3s var(--ease); }
.create-dropdown-container.open .create-caret { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px; padding: 6px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 30;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.dropdown-menu.show { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-item { display: flex; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px; font-weight: 600; font-size: 14px; }
.dropdown-item:hover { background: var(--surface-2); }

.mini-calendar-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; }
.mini-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mini-month-title { font-weight: 700; font-size: 15px; }
.mini-nav-arrows { display: flex; gap: 2px; }
.mini-arrow-btn { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--ink-2); }
.mini-arrow-btn:hover { background: var(--surface-2); }
.mini-arrow-btn svg { width: 15px; height: 15px; }
.mini-weekdays-row, .mini-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mini-weekdays-row span { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 4px 0; }
.mini-day { position: relative; font-size: 13px; font-weight: 600; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-variant-numeric: tabular-nums; }
.mini-day:hover { background: var(--surface-2); }
.mini-day.other-month { color: var(--ink-3); opacity: .6; }
.mini-day.today { background: var(--today); color: var(--surface); }
.mini-day.selected { box-shadow: inset 0 0 0 1.5px var(--today); }
.mini-day .md-dot { position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; }

.rail-section { display: flex; flex-direction: column; gap: 10px; }
.rail-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.layers { display: flex; flex-direction: column; gap: 2px; }
.layer-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 9px; font-weight: 600; font-size: 14px; cursor: pointer; }
.layer-row:hover { background: var(--surface-2); }
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.layer-box { width: 18px; height: 18px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: 0 0 auto; transition: background .2s var(--ease), border-color .2s var(--ease); }
.layer-box svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; opacity: 0; }
.layer-row input:checked + .layer-box { background: var(--c); border-color: var(--c); }
.layer-row input:checked + .layer-box svg { opacity: 1; }
.layer-row input:focus-visible + .layer-box { outline: 2px solid var(--focus); outline-offset: 2px; }
.location p { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.text-btn { align-self: flex-start; font-weight: 700; font-size: 14px; color: var(--focus); padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ==========================================================================
   Vista de mes
   ========================================================================== */
.calendar-zone { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.month-view-container { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 6px 18px 18px; }
.weekdays-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.weekday-cell { padding: 10px 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.weekday-cell.shabat-col { color: var(--s-shabat); }
.days-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(90px, 1fr); border-top: 1px solid var(--line); }
.day-cell { position: relative; padding: 8px 8px 6px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: background .25s var(--ease); }
.day-cell:nth-child(7n) { border-right: 0; background: var(--shabat-tint); }
.day-cell:hover { background: var(--surface); }
.day-cell:nth-child(7n):hover { background: color-mix(in srgb, var(--shabat-tint) 70%, var(--surface)); }
.day-cell.other-month > * { opacity: .45; }
.day-cell.selected { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.day-cell-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.day-number { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; width: 28px; height: 28px; display: grid; place-items: center; margin: -3px 0 0 -3px; border-radius: 50%; }
.day-cell.is-today .day-number { background: var(--today); color: var(--surface); }
.cell-events { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.event-badge {
  display: flex; gap: 6px; align-items: flex-start; min-width: 0; padding: 4px 7px; border-radius: 7px; text-align: left; font-size: 12px; font-weight: 600; line-height: 1.2;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--ink);
}
.event-badge .sw { width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-top: 4px; flex: 0 0 auto; }
.event-badge .txt { min-width: 0; display: flex; flex-direction: column; }
.event-badge .txt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-badge .txt span + span { font-size: 11px; color: var(--ink-2); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-badge.own .txt > span, .event-badge.mexico .txt > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-badge.own { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.event-badge.mexico { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); }
.more-events-link { font-size: 12px; font-weight: 700; color: var(--ink-3); padding-left: 4px; }
.cell-dots { display: none; gap: 3px; }
.event-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c); }

/* ==========================================================================
   Vista de semana
   ========================================================================== */
.week-view-container { flex: 1; flex-direction: column; min-height: 0; padding: 6px 18px 0; }
.week-header-row { display: grid; grid-template-columns: 64px 1fr; border-bottom: 1px solid var(--line); }
.timezone-gutter-header { display: flex; align-items: flex-end; padding-bottom: 10px; }
.timezone-label { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.week-days-columns-header { display: grid; grid-template-columns: repeat(7, 1fr); }
.day-header-col { padding: 8px 6px 10px; text-align: center; cursor: pointer; border-radius: 12px 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day-header-name { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.day-header-num { font-size: 22px; font-weight: 700; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.day-header-col.is-today .day-header-num { background: var(--today); color: var(--surface); }
.day-header-holy { font-size: 11px; font-weight: 700; color: var(--ink-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-time-grid-scroll { position: relative; flex: 1; overflow-y: auto; display: grid; grid-template-columns: 64px 1fr; }
.time-gutter { position: relative; }
.time-slot-label { height: 50px; font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: right; padding-right: 10px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.week-columns-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.day-time-column { position: relative; border-left: 1px solid var(--line); }
.day-time-column:nth-child(7) { background: var(--shabat-tint); }
.hour-cell { height: 50px; border-bottom: 1px solid var(--line); cursor: pointer; }
.hour-cell:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.week-event-card { position: absolute; left: 4px; right: 4px; border-radius: 9px; padding: 4px 7px; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: var(--ink); font-size: 12px; }
.week-event-card b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.current-time-line { position: absolute; left: 64px; right: 0; z-index: 4; pointer-events: none; display: flex; align-items: center; }
.time-line-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); margin-left: -4px; }
.time-line-bar { flex: 1; height: 2px; background: var(--amber); }

/* ==========================================================================
   Vista de año
   ========================================================================== */
.year-view-container { flex: 1; overflow-y: auto; padding: 18px 24px 28px; }
.year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.year-month-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; cursor: pointer; transition: border-color .25s var(--ease); }
.year-month-card:hover { border-color: var(--line-2); }
.year-month-name { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.year-mini-weekdays, .year-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.year-mini-weekdays span { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 2px 0; }
.year-mini-cell { position: relative; font-size: 12px; height: 27px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; font-weight: 600; }
.year-mini-cell:hover:not(.empty) { background: var(--surface-2); }
.year-mini-cell.today { background: var(--today); color: var(--surface); }
.year-mini-cell.has-event::after { content: ''; position: absolute; bottom: 1px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c, var(--ink-3)); }

/* ==========================================================================
   Panel del día (derecha)
   ========================================================================== */
.sidebar-zone { --night-ink: var(--ink); --night-ink-2: var(--ink-2); --night-line: var(--line); --veil-1: var(--surface-2); --veil-2: var(--line); --veil-4: var(--surface-2); background: var(--surface); color: var(--ink); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.sidebar-header { display: flex; justify-content: space-between; gap: 12px; padding: 22px 22px 16px; border-bottom: 1px solid var(--night-line); }
.sidebar-day-number { font-size: 15px; font-weight: 700; margin-top: 4px; }
.sidebar-quick-add-btn { width: 40px; height: 40px; border-radius: 12px; background: var(--veil-2); color: var(--night-ink); display: grid; place-items: center; flex: 0 0 auto; }
.sidebar-quick-add-btn:hover { background: var(--veil-4); }
.sidebar-quick-add-btn svg { width: 19px; height: 19px; }
.panel-scroll { flex: 1; overflow-y: auto; padding: 4px 22px 26px; }
.panel-block { padding: 18px 0; border-top: 1px solid var(--night-line); }
.panel-block:first-child, .holy-today:empty + .panel-block { border-top: 0; }
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }


.prayer-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.prayer { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--veil-1); }
.prayer .bi span:last-child { font-size: 13px; font-weight: 600; color: var(--night-ink-2); }
.prayer .range { text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.prayer .state { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--night-ink-2); }
.prayer.now { background: color-mix(in srgb, var(--amber) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--amber); }
.prayer.now .state { color: var(--amber); }
.prayer.done { opacity: .55; }
.panel-more { margin-top: 10px; color: var(--night-ink); }
.panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.panel-action { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--veil-1); color: var(--night-ink); text-align: left; }
.panel-action:hover { background: var(--veil-2); }
.panel-action svg { width: 18px; height: 18px; flex: 0 0 auto; }
.panel-action .bi span:last-child { font-size: 13px; font-weight: 700; }
.zmanim-list { list-style: none; margin-top: 8px; }
.zmanim-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid var(--night-line); }
.zmanim-list .bi span:last-child { font-size: 13px; color: var(--night-ink-2); font-weight: 600; }
.zmanim-list time { font-weight: 700; align-self: center; }
.zmanim-list small { grid-column: 1 / -1; font-size: 12px; color: var(--night-ink-2); }


.day-events-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.day-events-header .panel-title { margin: 0; }
.events-count-badge { font-size: 12px; font-weight: 700; color: var(--night-ink-2); }
.day-events-list { display: flex; flex-direction: column; gap: 8px; }
.day-event-card { display: grid; grid-template-columns: auto 4px 1fr auto; gap: 10px; align-items: start; padding: 11px 12px; border-radius: 14px; background: var(--veil-1); cursor: pointer; }
.day-event-card:hover { background: var(--veil-2); }
.event-time-col { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 42px; padding-top: 1px; }
.event-cat-bar { width: 4px; align-self: stretch; border-radius: 4px; background: var(--c); }
.event-title-text { font-weight: 700; font-size: 15px; }
.event-notes-preview { font-size: 13px; color: var(--night-ink-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card-actions { display: flex; gap: 2px; }
.card-action-btn { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--night-ink-2); }
.card-action-btn:hover { background: var(--veil-2); color: #fff; }
.card-action-btn svg { width: 15px; height: 15px; }
.empty-events-state { padding: 16px; border-radius: 14px; border: 1px dashed var(--night-line); text-align: center; }
.empty-title { font-weight: 700; font-size: 14px; }
.empty-subtitle { font-size: 13px; color: var(--night-ink-2); margin-top: 2px; }

/* ==========================================================================
   Botones, formularios y ventanas
   ========================================================================== */
.primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--night); color: var(--night-ink); font-weight: 700; font-size: 15px; transition: transform .25s var(--ease), background .25s var(--ease);
}
:root[data-theme="dark"] .primary-btn { background: var(--night-ink); color: #1b1f3f; }
.primary-btn:active { transform: scale(.98); }
.ghost-btn { height: 42px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ghost-btn:hover { background: var(--surface-2); color: var(--ink); }
.ghost-btn.danger, .icon-btn.danger { color: var(--s-urgente); }
.ghost-btn.danger:hover, .icon-btn.danger:hover { background: color-mix(in srgb, var(--s-urgente) 9%, var(--surface)); color: var(--s-urgente); }
.icon-btn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(11, 13, 34, .55); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-card { width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border-radius: 26px; padding: 22px 22px 20px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); transform: translateY(14px) scale(.98); transition: transform .45s var(--ease); }
.modal-backdrop.open .modal-card { transform: none; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.modal-close-btn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); flex: 0 0 auto; }
.modal-close-btn:hover { background: var(--surface-2); color: var(--ink); }
.modal-close-btn svg { width: 18px; height: 18px; }
.modal-note { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.form-group label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; border-radius: 12px; border: 1px solid var(--line-2); background: var(--ground); padding: 11px 13px; font-size: 15px; font-weight: 500;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.actions-right { margin-left: auto; display: flex; gap: 8px; }
.fine { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 12px; }

.category-pill-badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--c, var(--ink-3)) 16%, var(--surface)); }
.category-pill-badge::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--ink-3)); }
.detail-actions { display: flex; gap: 4px; align-items: center; }
.detail-event-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
.detail-meta-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.detail-meta-row { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.detail-meta-row svg { width: 17px; height: 17px; flex: 0 0 auto; }
.season-sw { width: 12px; height: 12px; border-radius: 4px; margin: 0 2.5px; flex: 0 0 auto; }
.detail-card-header { align-items: center; justify-content: flex-end; margin-bottom: 4px; }
.detail-notes-card { flex-direction: column; gap: 4px; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--ground); }
.detail-notes-label { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.detail-notes-content { font-size: 15px; line-height: 1.55; white-space: pre-wrap; }

/* Recordatorios */
.toggle-list { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); overflow: hidden; }
.toggle-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.toggle-row:first-child { border-top: 0; }
.toggle-row .bi { flex: 1; }
.toggle-row .bi span:last-child { font-size: 14px; font-weight: 700; }
.toggle-row small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; flex: 0 0 auto; transition: background .3s var(--ease); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.toggle-row input:checked + .switch { background: var(--today); }
.toggle-row input:checked + .switch::after { transform: translateX(18px); }
.toggle-row input:focus-visible + .switch { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Brújula */
.compass-card { text-align: center; }
.compass-card .modal-header { text-align: left; }
.compass { position: relative; width: 260px; height: 260px; margin: 4px auto 12px; }
.compass-rose { position: absolute; inset: 0; border-radius: 50%; background: var(--night); color: var(--night-ink); transition: transform .4s var(--ease); }
.compass-rose > span { position: absolute; font-weight: 800; font-size: 14px; }
.cn { top: 12px; left: 50%; transform: translateX(-50%); color: var(--amber); }
.cs { bottom: 12px; left: 50%; transform: translateX(-50%); }
.ce { right: 14px; top: 50%; transform: translateY(-50%); }
.cw { left: 14px; top: 50%; transform: translateY(-50%); }
.compass-ticks { position: absolute; inset: 0; }
.compass-ticks i { position: absolute; left: 50%; top: 0; width: 1px; height: 50%; transform-origin: bottom center; }
.compass-ticks i::before { content: ''; position: absolute; top: 34px; left: 0; width: 1px; height: 6px; background: var(--night-line); }
.compass-ticks i.major::before { height: 10px; background: var(--night-ink-2); }
.compass-needle { position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; transform-origin: bottom center; transition: transform .6s var(--ease); }
.compass-needle::before { content: ''; position: absolute; left: 0; right: 0; top: 46px; bottom: 0; background: var(--amber); border-radius: 2px; }
.needle-head { position: absolute; top: 40px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--amber); }
.needle-label { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--amber); white-space: nowrap; }
.compass-center { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--night-ink); }
.compass-reading { font-size: 17px; font-weight: 800; }
.compass-status { font-size: 14px; color: var(--ink-2); margin: 6px auto 16px; max-width: 34ch; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--night); color: var(--night-ink); padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14px; transition: opacity .35s var(--ease), transform .35s var(--ease); max-width: calc(100% - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.brand-mark { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.brand-mark-image { display: block; width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }

/* Bienvenida: diseño de AntonyUwu */
.welcome-open { overflow: hidden; }
.welcome { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--ground); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.welcome.leaving { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.welcome-sky { --welcome-top: #30234f; --welcome-mid: #60477e; --welcome-horizon: #b38acb; --sky-mid: var(--welcome-mid); position: relative; overflow-x: clip; color: #f6f1fa; padding-bottom: 8px; background: radial-gradient(90% 40% at 70% 0%, #241a3c 0%, transparent 70%), linear-gradient(180deg, var(--welcome-top) 0%, var(--welcome-mid) 100%); }
.welcome-inner { max-width: 1120px; margin: 0 auto; padding: 32px 28px 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 400px); gap: 48px; align-items: start; }
.welcome-copy { display: flex; flex-direction: column; min-width: 0; }
.welcome-copy .brand-mark { margin-bottom: 0; }
.welcome-copy .brand-mark-image { width: 68px; height: 68px; }
.login-header .brand-mark-image { width: 60px; height: 60px; }
.welcome-line-wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.bi-xl { padding-top: 40px; font-size: clamp(42px, 7vw, 76px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; color: rgba(250, 246, 255, .96); }
.welcome-lead { max-width: 52ch; font-size: 17px; line-height: 1.55; color: rgba(246, 241, 230, .88); margin-top: 18px; }
.welcome-today { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-size: 14px; font-weight: 600; color: rgba(250, 246, 255, .9); }
.welcome-clock { display: flex; justify-content: flex-end; align-items: baseline; gap: 9px; padding-top: 12px; font-size: 12px; font-weight: 600; color: rgba(250, 246, 255, .78); }
.welcome-clock strong { font-size: 20px; line-height: 1; font-weight: 750; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: #fff; }
.welcome-line { margin: 18px 0 0; }
.welcome-body { max-width: 1120px; margin: 0 auto; padding: 56px 28px 72px; }
.welcome-daily > h2 { margin-bottom: 20px; font-size: 23px; letter-spacing: -.02em; }
.welcome-daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.welcome-daily-card { padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 14px 40px -30px #17102c66; }
.welcome-daily-card h3 { font-size: 17px; font-weight: 750; }
.welcome-daily-date { margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.welcome-daily-card ul { display: grid; gap: 12px; margin-top: 16px; padding-left: 19px; color: var(--ink-2); font-size: 15px; }
.welcome-daily-card li span { display: block; margin-top: 4px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.welcome-no-event { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.welcome-daily-card.jewish { border-top: 3px solid #8f75bf; }
.welcome-daily-card.islamic { border-top: 3px solid #b68acb; }
.welcome-setup { color: var(--ink); background: var(--surface); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); margin: 4px 0 8px; }
.welcome-setup h2 { margin-bottom: 6px; }
.welcome-setup h2 { font-size: 17px; font-weight: 800; }
.welcome-setup .setup-row { display: flex; width: 100%; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 18px; transition: background .25s var(--ease); }
.welcome-setup .setup-row:hover { background: var(--surface-2); }
.welcome-setup .setup-row.done .setup-ic { background: var(--s-pesaj); color: #fff; }
.setup-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: 0 0 auto; }
.setup-ic svg { width: 19px; height: 19px; }
.setup-t b { display: block; font-size: 15px; }
.setup-t small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.welcome-setup .enter-btn { height: 54px; margin-top: 8px; justify-content: space-between; padding: 0 8px 0 24px; background: var(--night); color: var(--night-ink); border-radius: 999px; }
.btn-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--veil-3); transition: transform .35s var(--ease); }
.welcome-setup .enter-btn:hover .btn-ic { transform: translateX(3px); }
.btn-ic svg { width: 18px; height: 18px; }
.welcome-setup .fine { font-size: 11px; line-height: 1.7; color: var(--ink-3); }
.setup-ic { color: var(--ink-2); }
.welcome-sky .zman-line, .welcome-sky .sky-glow { position: relative; z-index: 1; }
.welcome-sky .sky-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none; background: radial-gradient(70% 100% at 50% 100%, color-mix(in srgb, var(--welcome-horizon) 80%, transparent), transparent 100%); }
.welcome-sky .zman-line { position: relative; height: 84px; margin: 0 4px; }
.welcome-sky .zman-line::before { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--welcome-horizon) 70%, #f6f1fa); }
.zl-tick { position: absolute; bottom: 18px; width: 1px; height: 9px; margin-left: -.5px; background: rgba(246, 241, 230, .7); }
.zl-mark { position: absolute; bottom: 31px; display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; }
.zl-mark .t { font-size: 15px; font-weight: 700; color: var(--sky-ink); font-variant-numeric: tabular-nums; }
.zl-mark .es { font-size: 12px; font-weight: 600; color: rgba(246, 241, 230, .82); line-height: 1.2; }
.zl-mark.past .t, .zl-mark.past .es { opacity: .62; }
.zl-sun { position: absolute; bottom: 13px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 0 4px rgba(255, 217, 138, .22); transition: left 1.6s var(--ease); }
.zl-sun.moon { background: #e9e4f7; box-shadow: inset -6px -2px 0 0 var(--sky-mid); }
.zl-window { position: absolute; bottom: 21px; height: 3px; border-radius: 4px; background: rgba(255, 217, 138, .65); }
@media (max-width: 900px) {
  .welcome-inner { grid-template-columns: 1fr; gap: 28px; padding: calc(env(safe-area-inset-top) + 22px) 18px 0; }
  .welcome-line-wrap { padding: 0 18px; }
  .welcome-body { padding: 36px 18px 48px; }
  .welcome-daily-grid { grid-template-columns: 1fr; }
  .welcome-sky .zman-line { height: 78px; }
  .zl-mark.minor { display: none; }
}

/* ==========================================================================
   Login (opcional)
   ========================================================================== */
.login-view-wrapper { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--ground); }
.login-card { width: min(420px, 100%); background: var(--surface); border-radius: 26px; padding: 28px; }
.login-header .brand-mark { color: var(--ink); margin-bottom: 18px; }
.login-title { font-size: 26px; font-weight: 800; }
.login-subtitle { color: var(--ink-2); font-size: 15px; margin-top: 4px; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.login-submit-btn { width: 100%; margin-top: 4px; }
.login-footer { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.login-register-link, .guest-link { color: var(--focus); font-weight: 700; text-underline-offset: 3px; }
.login-guest-option { margin-top: 10px; font-size: 14px; }
.login-view-wrapper { background: linear-gradient(160deg, var(--sky-top), var(--sky-mid)); }
.login-card { width: min(400px, 100%); padding: 32px; border: 1px solid var(--line); box-shadow: 0 20px 60px -28px #00000055; }
.login-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.login-header .brand-mark { margin-bottom: 6px; }
.login-title { font-size: 24px; font-weight: 700; }
.login-subtitle { font-size: 13px; margin: 0; }
.login-footer, .login-guest-option { text-align: center; font-size: 13px; }
.login-guest-option { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.login-register-link, .guest-link { color: var(--focus); }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1240px) {
  .workspace-body { grid-template-columns: minmax(0, 1fr) 300px; }
  .left-sidebar { position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; width: 290px; background: var(--ground); box-shadow: 0 0 60px rgba(0,0,0,.25); transform: translateX(-105%); transition: transform .45s var(--ease); }
  .left-sidebar.open { transform: none; }
}
@media (min-width: 1241px) {
  .menu-toggle-btn { display: none; }
  .left-sidebar.collapsed { display: none; }
  .workspace-body:has(.left-sidebar.collapsed) { grid-template-columns: minmax(0, 1fr) 352px; }
}
.calendar-zone.full-width ~ .sidebar-zone { display: none; }
.workspace-body:has(.calendar-zone.full-width) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1241px) { .workspace-body:has(.calendar-zone.full-width) { grid-template-columns: 252px minmax(0, 1fr); } }

@media (max-width: 900px) {
  .calendar-app { height: auto; min-height: 100dvh; }
  .workspace-body { display: flex; flex-direction: column; }
  .sky { padding: calc(env(safe-area-inset-top) + 10px) 14px 0; }
  .sky-row { flex-wrap: wrap; gap: 10px; }
  .period { order: 3; width: 100%; margin-left: 0; }
  .current-period-title { font-size: 19px; flex-wrap: wrap; white-space: normal; row-gap: 0; min-width: 0; }
  .view-switch button { padding: 0 10px; }
  .month-view-container { padding: 4px 6px 10px; }
  .days-grid { grid-auto-rows: minmax(78px, auto); }
  .day-cell { padding: 5px 4px; gap: 3px; }
  .day-number { font-size: 14px; width: 24px; height: 24px; }
  .cell-events, .more-events-link { display: none; }
  .cell-dots { display: flex; flex-wrap: wrap; }
  .weekday-cell { padding: 8px 4px; font-size: 11px; letter-spacing: .02em; }
  .sidebar-zone { min-height: auto; }
  .panel-scroll { overflow: visible; }
  .week-view-container { padding: 4px 6px 0; height: 70dvh; }
  .week-header-row, .week-time-grid-scroll { grid-template-columns: 44px 1fr; }
  .current-time-line { left: 44px; }
  .day-header-num { font-size: 16px; width: 30px; height: 30px; }
  .day-header-holy { display: none; }
}
@media (max-width: 560px) {
  .brand-date span:last-child { display: none; }
  .nav-right { display: contents; }
  .nav-right .sky-btn { width: 36px; height: 36px; }
  .view-switch { order: 5; width: 100%; }
  .view-switch button { flex: 1; }
  .period { order: 4; }
  .year-view-container { padding: 12px; }
  .year-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .year-month-card { padding: 10px; }
  .year-mini-cell { height: 21px; font-size: 11px; }
  .form-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Calendario minimalista */

.sky-btn, .sky-pill { color: var(--sky-ink); background: var(--veil-2); }
.brand { color: var(--sky-ink); background: transparent; }
.sky-btn:hover, .sky-pill:hover { background: var(--veil-4); }
.sky-pill { border: 1px solid var(--veil-4); border-radius: 8px; font-weight: 500; }
.brand-date { color: rgba(246, 241, 230, .8); font-size: 12px; font-weight: 400; }
.brand-name { font-weight: 700; }
.current-period-title { font-size: 20px; font-weight: 600; }
.view-switch { border-radius: 8px; background: var(--veil-2); }
.view-switch button { color: rgba(246, 241, 230, .85); border-radius: 6px; font-weight: 500; }
.view-switch button.on { background: var(--sky-ink); color: #1b1f3f; }
.left-sidebar { padding: 24px 16px; gap: 28px; }
.create-pill-btn { background: var(--ink); color: var(--ground); border-radius: 8px; box-shadow: none; height: 42px; font-weight: 600; }
.mini-calendar-card { border: 0; padding: 0; background: transparent; }
.rail-title { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.layer-row { font-weight: 400; font-size: 13px; }
.layer-box { border-radius: 4px; width: 16px; height: 16px; }
.day-number { font-weight: 500; }
.day-cell.selected { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.day-cell.is-today.selected { background: transparent; box-shadow: none; }
.weekday-cell.shabat-col { color: var(--ink-3); }
.event-badge, .event-badge.own, .event-badge.mexico, .event-badge.islamic { background: transparent; box-shadow: none; padding: 4px 2px; font-weight: 400; }
.event-badge:hover { background: var(--surface-2); }
.event-badge .sw { border-radius: 50%; width: 5px; height: 5px; }
.sidebar-header { padding: 24px 20px 18px; align-items: center; }
.sidebar-day-number { font-size: 17px; font-weight: 600; color: var(--ink); }
.sidebar-quick-add-btn { background: var(--veil-2); border-radius: 8px; }
.panel-scroll { padding: 0 20px 24px; }
.panel-title { font-size: 13px; font-weight: 600; }
.empty-events-state { border: 0; background: transparent; padding: 26px 0; text-align: left; }
.empty-title { font-weight: 500; color: var(--ink-2); }
.empty-subtitle { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.events-count-badge { font-weight: 400; }
.day-event-card { background: transparent; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 0; gap: 8px; }
.event-title-text { font-size: 14px; font-weight: 500; }
.card-action-btn:hover { color: var(--ink); }
.calendar-extras summary { cursor: pointer; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.calendar-extras[open] summary { margin-bottom: 16px; }
.calendar-extras .location { margin-top: 20px; font-size: 13px; gap: 6px; }
.calendar-extras .location .text-btn { text-align: left; }
.prayer, .panel-action { border-radius: 8px; padding: 10px; }
.prayer .range { font-size: 12px; font-weight: 500; }
.prayer.now { background: var(--surface-2); box-shadow: inset 2px 0 var(--ink-3); }
.prayer.now .state { color: var(--ink-2); }
.panel-action { gap: 6px; }
.panel-action .bi span:last-child { font-size: 12px; font-weight: 500; }
.primary-btn { background: var(--ink); color: var(--ground); }
.primary-btn, .ghost-btn, .modal-card, .login-card { border-radius: 10px; }
:root[data-theme="dark"] .primary-btn { background: var(--ink); color: var(--ground); }
@media (max-width: 900px) {
  .sky { padding: calc(env(safe-area-inset-top) + 10px) 14px 12px; }
  .sidebar-zone { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  #remindersBtn { margin-left: auto; }
  .current-period-title { font-size: 18px; }
}

/* ==========================================================================
   Colores del cielo: la paleta del diseño anterior sobre la interfaz actual.
   Solo cambia color; tamaños, tipografía y estructura se quedan como están.
   ========================================================================== */
:root {
  --ground: #f4f1ea;
  --surface: #fbf9f4;
  --surface-2: #ece7dc;
  --ink: #1b1d2e;
  --ink-2: #474859;
  --ink-3: #66646f;
  --night: #1b1f3f;
  --night-ink: #f3eee3;
  --today: #3d3a6b;
  --shabat-tint: #ebe7f2;
  --focus: #5a4fb0;
  /* Una tonalidad fija por temporada (paleta validada: banda, croma y daltonismo) */
  --s-israel: #2a78d6;
  --s-purim: #eb6834;
  --s-pesaj: #1baf7a;
  --s-januca: #eda100;
  --s-menor: #e87ba4;
  --s-islamico: #008300;
  --s-noraim: #6250d6;
  --s-shabat: #3d3a6b;
  --s-ayuno: #7d776d;
}
:root[data-theme="dark"] {
  --ground: #0f1228;
  --surface: #161a35;
  --surface-2: #1f2446;
  --ink: #ece8dd;
  --ink-2: #c4c0d2;
  --ink-3: #9a96ac;
  --line: rgba(236, 232, 221, 0.09);
  --line-2: rgba(236, 232, 221, 0.17);
  --night: #0a0d22;
  --today: #b9b2f0;
  --shabat-tint: #1d2147;
  --focus: #b9b2f0;
  --s-israel: #3987e5;
  --s-purim: #d95926;
  --s-pesaj: #199e70;
  --s-januca: #c98500;
  --s-menor: #d55181;
  --s-islamico: #008300;
  --s-noraim: #9085e9;
  --s-shabat: #8d86d6;
  --s-ayuno: #8a857b;
}

/* Calendario sobre piedra, con el sábado tintado */
.weekday-cell.shabat-col { color: var(--s-shabat); }
.event-badge.jewish, .event-badge.islamic { background: color-mix(in srgb, var(--c) 14%, var(--surface)); padding: 4px 7px; border-radius: 7px; font-weight: 600; }
.event-badge.own { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); padding: 4px 7px; border-radius: 7px; }
.event-badge.mexico { box-shadow: inset 0 0 0 1px var(--line-2); padding: 4px 7px; border-radius: 7px; }
.event-badge .sw { border-radius: 2px; width: 7px; height: 7px; }
.event-badge:hover { background: color-mix(in srgb, var(--c) 22%, var(--surface)); }

/* Panel derecho azul noche */
.sidebar-zone {
  --night-ink: #f3eee3; --night-ink-2: #c8c3d9; --night-line: rgba(243, 238, 227, 0.13);
  --veil-1: rgba(255, 255, 255, 0.06); --veil-2: rgba(255, 255, 255, 0.10); --veil-4: rgba(255, 255, 255, 0.20);
  background: var(--night); color: var(--night-ink); border-left: 0;
}
.sidebar-day-number { color: var(--night-ink); }
.empty-title { color: var(--night-ink); }
.empty-subtitle, .events-count-badge { color: var(--night-ink-2); }
.calendar-extras summary { color: var(--night-ink-2); }
.day-event-card { border-bottom-color: var(--night-line); }
.card-action-btn:hover { color: #fff; }
.sidebar-zone .text-btn { color: var(--night-ink); }
.prayer.now { background: color-mix(in srgb, var(--amber) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--amber); }
.prayer.now .state { color: var(--amber); }
.create-pill-btn, .primary-btn { background: var(--night); color: var(--night-ink); }
:root[data-theme="dark"] .primary-btn, :root[data-theme="dark"] .create-pill-btn { background: var(--night-ink); color: #1b1f3f; }

/* ==========================================================================
   Paneles que se esconden (computadora) y botón Crear flotante
   ========================================================================== */
.panel-toggle-btn[aria-pressed="false"], .menu-toggle-btn[aria-pressed="false"] { background: transparent; box-shadow: inset 0 0 0 1px var(--veil-4); }
.workspace-body.no-right .sidebar-zone { display: none; }
@media (max-width: 1240px) {
  .workspace-body.no-right { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1241px) {
  .menu-toggle-btn { display: grid; }
  .workspace-body { grid-template-columns: 232px minmax(0, 1fr) 300px; }
  .workspace-body.no-left .left-sidebar { display: none; }
  .workspace-body.no-left { grid-template-columns: minmax(0, 1fr) 300px; }
  .workspace-body.no-right, .workspace-body:has(.calendar-zone.full-width) { grid-template-columns: 232px minmax(0, 1fr); }
  .workspace-body.no-left.no-right, .workspace-body.no-left:has(.calendar-zone.full-width) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .panel-toggle-btn { display: none; }
}

.create-fab { position: fixed; right: 24px; bottom: 24px; z-index: 35; }
.create-fab .create-pill-btn {
  height: 52px; padding: 0 18px 0 20px; border-radius: 999px; color: var(--sky-ink);
  background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand-top) 100%);
  box-shadow: inset 0 0 0 1px var(--veil-4), 0 18px 36px -14px rgba(11, 13, 34, .6);
}
:root[data-theme="dark"] .create-fab .create-pill-btn { color: var(--sky-ink); background: linear-gradient(180deg, var(--brand-mid) 0%, var(--brand-top) 100%); }
.create-fab .create-menu { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; transform: translateY(4px); }
.create-fab .create-menu.show { transform: none; }
.create-fab .create-caret { transform: rotate(180deg); }
.create-fab.open .create-caret { transform: none; }
.panel-scroll { padding-bottom: 96px; }
.month-view-container { padding-bottom: 84px; }