/* ----------------------------------------------------------------------------
   Sefardí · Zmanim — pantalla principal
   Auto día/noche: la clase .day / .night la pone app.js según la hora solar.
   Paleta fría (sin tonos cálidos): papel crema de día, pizarra azulada de noche.
---------------------------------------------------------------------------- */

:root {
  /* No dependemos de Google Fonts: tras las webfonts van fuentes de sistema
     (incl. hebreas David/Frank Ruehl CLM) para que renderice siempre, también
     en navegadores que bloquean fonts.gstatic.com (Zen). */
  --serif: "EB Garamond", "Latin Modern Roman", "Cardo", Georgia, "Times New Roman", serif;
  --hebrew: "Frank Ruhl Libre", "Frank Ruehl CLM", "David CLM", "Noto Serif Hebrew", "FreeSerif", serif;

  /* Día — papel libro, alto contraste, mate */
  --day-bg: #f8f5ec;
  --day-bg-2: #f1ecdd;
  --day-ink: #11161c;      /* casi negro: máximo contraste sobre crema */
  --day-soft: #515963;
  --day-line: #d6cfbd;
  --day-accent: #0f7184;   /* teal profundo */
  --day-tint: rgba(15, 113, 132, 0.09);

  /* Noche — pizarra azulada, alto contraste, mate */
  --night-bg: #0d1117;     /* más oscuro */
  --night-bg-2: #151c26;
  --night-ink: #f3f7fc;    /* casi blanco */
  --night-soft: #98a4b3;
  --night-line: #283241;
  --night-accent: #74d6ea; /* cyan brillante */
  --night-tint: rgba(116, 214, 234, 0.13);
}

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

html, body { height: 100%; }

body {
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 1.2s ease, color 1.2s ease;
}

/* Tema según hora solar */
.day  { --bg: var(--day-bg);  --bg-2: var(--day-bg-2);  --ink: var(--day-ink);  --soft: var(--day-soft);  --line: var(--day-line);  --accent: var(--day-accent);  --tint: var(--day-tint); }
.night{ --bg: var(--night-bg);--bg-2: var(--night-bg-2);--ink: var(--night-ink);--soft: var(--night-soft);--line: var(--night-line);--accent: var(--night-accent);--tint: var(--night-tint); }

#app {
  min-height: 100dvh;
  max-width: 30rem;
  margin: 0 auto;
  /* hueco inferior para que la barra fija no tape la lista */
  padding: max(1.4rem, env(safe-area-inset-top)) 1.4rem calc(6.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: var(--bg); /* mate: sin gradientes ni brillos */
  transition: background 1.2s ease;
}

#app.loading { opacity: 0; }
#app { opacity: 1; transition: opacity .5s ease, background 1.2s ease; }

/* ---- Topbar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bsd {
  font-family: var(--hebrew);
  font-size: .9rem;
  color: var(--soft);
  letter-spacing: .02em;
}
.place {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--soft); /* señala que es tocable (también en táctil) */
  cursor: pointer;
  padding: .1rem 0;
  transition: border-color .2s, color .2s;
}
.place:hover,
.place:active { color: var(--accent); border-bottom-color: var(--accent); }

.icon-btn {
  background: none;
  border: none;
  color: var(--soft);
  cursor: pointer;
  padding: .1rem;
  display: inline-flex;
  transition: color .2s;
}
.icon-btn:hover, .icon-btn:active { color: var(--accent); }

/* ---- Brújula al Kotel ---- */
.kotel-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: calc(2rem + env(safe-area-inset-top)) 1.4rem calc(2rem + env(safe-area-inset-bottom));
  text-align: center;
}
.kotel-overlay[hidden] { display: none; }
.kotel-close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1.2rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: var(--soft);
  cursor: pointer;
  line-height: 1;
}
.kotel-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}
.dial {
  position: relative;
  width: min(62vw, 14rem);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
}
.ring { position: absolute; inset: 0; transition: transform .15s ease-out; } /* gira con el norte real */
.card {
  position: absolute;
  font-family: var(--serif);
  font-size: .8rem;
  color: var(--soft);
  left: 50%; transform: translateX(-50%);
}
.card.n { top: .45rem; color: var(--accent); font-weight: 600; }
.card.s { bottom: .45rem; }
.card.e { right: .55rem; left: auto; top: 50%; transform: translateY(-50%); }
.card.w { left: .55rem; top: 50%; transform: translateY(-50%); }
.tick {                          /* marcas finas en N/E/S/O */
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 7px;
  margin-left: -.5px;
  background: var(--line);
  transform-origin: 50% 7rem;    /* = radio del dial (14rem/2) */
}
.tick.te { transform: rotate(90deg); }
.tick.ts { transform: rotate(180deg); }
.tick.tw { transform: rotate(270deg); }
.needle {                        /* aguja: línea fina hacia el Kotel + ✡ en la punta */
  position: absolute;
  left: 50%; bottom: 50%;
  width: 3px; height: 38%;
  margin-left: -1.5px;
  transform-origin: 50% 100%;    /* gira alrededor del centro del dial */
  transition: transform .15s ease-out;
}
.needle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, transparent, var(--accent));
  border-radius: 2px;
}
.needle::after {
  content: "✡";
  position: absolute;
  top: -1.35em; left: 50%;
  transform: translateX(-50%);
  color: var(--accent);
  font-size: 1.05rem;
}
.hub {
  position: absolute;
  left: 50%; top: 50%;
  width: .6rem; height: .6rem;
  margin: -.3rem 0 0 -.3rem;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--bg);
}
.kotel-dir {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: -.4rem;
}
.kotel-dist {
  font-size: 1.15rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-top: -1.2rem;
}
.kotel-note { font-size: .85rem; color: var(--soft); max-width: 19rem; line-height: 1.45; }
.kotel-enable {
  font-family: var(--serif);
  font-size: 1rem;
  padding: .7rem 1.4rem;
  border: 1px solid var(--accent);
  border-radius: .7rem;
  background: var(--tint);
  color: var(--accent);
  cursor: pointer;
}

/* ---- Fechas ---- */
.dates { text-align: center; }
.heb-date {
  font-family: var(--serif); /* letras latinas: "25 Siván 5786" */
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .005em;
}
.greg-date {
  margin-top: .35rem;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--soft);
}
.study-line {
  margin-top: .7rem;
  font-size: .9rem;
  color: var(--soft);
  letter-spacing: .01em;
}
.study-line b { color: var(--ink); font-weight: 600; font-style: normal; }

/* ---- Tajanún: toca o no toca (lo importante) ---- */
.tachanun {
  text-align: center;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: .85rem;
  background: var(--bg-2);
}
.tachanun.yes { border-color: var(--accent); }
.tachanun.no  { background: var(--tint); }
.tj-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .62rem;
  color: var(--soft);
}
.tj-verdict {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: .12rem;
}
.tachanun.yes .tj-verdict { color: var(--accent); }
.tachanun.no  .tj-verdict { color: var(--ink); }
.tj-reason {
  display: block;
  font-style: italic;
  color: var(--soft);
  font-size: .92rem;
  margin-top: .1rem;
}
.tj-note {
  display: block;
  font-size: .78rem;
  color: var(--soft);
  margin-top: .25rem;
}

/* ---- Barra de acción inferior (zona del pulgar) ---- */
.actionbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  gap: .6rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--bg);              /* mate y opaco sobre el contenido */
  border-top: 1px solid var(--line);
  transition: background 1.2s ease;
}
.nav-btn {
  font-family: var(--serif);
  flex: 1;                            /* botones iguales y anchos */
  min-height: 3.4rem;                 /* ~54px: cómodo de pulsar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: var(--bg-2);            /* mate, plano */
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.nav-btn:hover { border-color: var(--accent); }
.nav-btn:active { transform: scale(.985); }

.nav-btn.primary {
  border-color: var(--accent);
  background: var(--tint);
}
.nav-eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .58rem;
  color: var(--soft);
}
.nav-name {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}
.nav-btn.primary .nav-name { color: var(--accent); }

/* ---- Lista de zmanim ---- */
.zmanim-list { list-style: none; }
.zman {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem .2rem;
  border-bottom: 1px solid var(--line);
}
.zman:last-child { border-bottom: none; }
.zman .name { font-size: 1.05rem; }
.zman .sub  { font-size: .72rem; color: var(--soft); margin-left: .4rem; font-style: italic; }
.zman .time {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--ink);
}
.zman.passed { opacity: .5; }
.zman.next {
  border-bottom: none;
  margin: .2rem -.6rem;
  padding: .7rem .8rem;
  background: var(--tint); /* tinte plano, mate */
  border-radius: .7rem;
}
.zman.next .name,
.zman.next .time { color: var(--accent); font-weight: 600; }

/* ---- Footer ---- */
.footer { margin-top: auto; text-align: center; padding-top: .6rem; }
.footer p { font-size: .8rem; color: var(--soft); }

/* secciones de la lista (separadores tipo noche/día) */
.zman.divider {
  justify-content: center;
  border-bottom: none;
  padding-top: 1rem;
}
.zman.divider span {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--soft);
}