/* In-phone UI — 390×845, matched to the live app */

.app {
  --fo-bg: #F2F6F5;
  --fo-elev: #FFFFFF;
  --fo-text: #0F1714;
  --fo-muted: #3D4A44;
  --fo-secondary: #243028;
  --fo-border: #C5D0CA;
  --fo-border-strong: #8FA098;
  --fo-accent: #0E8A7A;
  --fo-accent-strong: #0A6B5E;
  --fo-accent-soft: #E0F5F1;
  --fo-success: #1B7A45;
  --fo-success-soft: #D6F0E0;
  --fo-subtle: #E4ECEA;
  --fo-ink: #0F1F1E;
  --fo-danger: #C62828;

  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 845px;
  transform-origin: top left;
  will-change: transform;
  background: var(--fo-bg);
  color: var(--fo-text);
  font-family: "Plus Jakarta Sans", var(--font-text);
  font-weight: 500;
  overflow: hidden;
}

.app svg.i {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app .statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 6px;
}

.app .sb-time {
  font-weight: 700;
  font-size: 15px;
}

.app .sb-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.fo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 10px;
  background: var(--fo-elev);
  border-bottom: 2px solid var(--fo-border);
}

.fo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}

.fo-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.fo-top-actions {
  display: flex;
  gap: 8px;
}

.fo-iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--fo-border-strong);
  background: var(--fo-elev);
  display: grid;
  place-items: center;
  color: var(--fo-text);
}

.fo-iconbtn svg { width: 20px; height: 20px; }

.fo-page {
  padding: 16px 18px 88px;
}

.fo-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.fo-hi {
  margin: 0 0 6px;
  color: var(--fo-muted);
  font-size: 14px;
  font-weight: 600;
}

.fo-hero h2,
.fo-pagetitle {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.fo-pagetitle { margin-bottom: 12px; }

.fo-fab {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--fo-accent);
  color: #fff;
  display: grid;
  place-items: center;
}

.fo-fab svg { width: 24px; height: 24px; stroke-width: 2.2; }

.fo-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 16px;
}

.fo-ptrack {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: var(--fo-subtle);
  overflow: hidden;
}

.fo-pfill {
  width: 33%;
  height: 100%;
  background: var(--fo-accent);
  border-radius: inherit;
}

.fo-progress span {
  font-size: 13px;
  font-weight: 800;
  color: var(--fo-secondary);
  white-space: nowrap;
}

.fo-days {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 16px;
}

.fo-chip {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 999px;
  color: var(--fo-muted);
}

.fo-chip span {
  display: block;
  font-size: 11px;
  font-weight: 650;
}

.fo-chip strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 800;
  color: var(--fo-text);
}

.fo-chip.on {
  background: var(--fo-ink);
  color: rgba(255, 255, 255, 0.75);
}

.fo-chip.on strong { color: #fff; }

.fo-card {
  background: var(--fo-elev);
  border: 1px solid var(--fo-border);
  border-radius: 20px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 20, 0.08);
}

.fo-card.next {
  background: var(--fo-ink);
  border: none;
  color: #fff;
  padding: 16px 18px;
}

.fo-next-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.fo-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.fo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fo-pill {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fo-accent-soft);
  color: var(--fo-accent-strong);
  display: grid;
  place-items: center;
  flex: none;
}

.fo-pill svg { width: 20px; height: 20px; }
.fo-card.next .fo-pill {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.fo-meta { flex: 1; min-width: 0; }

.fo-meta strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
}

.fo-meta span {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 650;
  color: var(--fo-muted);
}

.fo-card.next .fo-meta span { color: rgba(255, 255, 255, 0.8); }

.fo-tag {
  flex: none;
  font-size: 11px;
  font-weight: 750;
  padding: 5px 10px;
  border-radius: 999px;
}

.fo-tag.ok { background: var(--fo-success-soft); color: var(--fo-success); }
.fo-tag.wait { background: var(--fo-accent-soft); color: var(--fo-accent-strong); }
.fo-tag.later { background: var(--fo-subtle); color: var(--fo-muted); }
.fo-card.next .fo-tag.wait {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.fo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.fo-actions.single {
  grid-template-columns: 1fr;
}

.fo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 750;
  border: 1px solid var(--fo-border);
}

.fo-btn svg { width: 16px; height: 16px; }
.fo-btn.primary {
  background: var(--fo-accent);
  border-color: var(--fo-accent);
  color: #fff;
}
.fo-btn.secondary {
  background: var(--fo-bg);
  color: var(--fo-secondary);
}
.fo-btn.light {
  background: #fff;
  border-color: #fff;
  color: var(--fo-ink);
}
.fo-btn.ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.fo-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--fo-elev);
  border-top: 2px solid var(--fo-border);
  padding: 6px 8px 8px;
}

.fo-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--fo-muted);
  font-size: 10px;
  font-weight: 750;
  border-radius: 12px;
}

.fo-tab.on {
  color: var(--fo-accent-strong);
  background: var(--fo-accent-soft);
}

.fo-tab svg { width: 22px; height: 22px; }

.fo-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--fo-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* Promemoria — confirm-dark */
.app.fo-notify {
  background: var(--fo-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 8px 22px 28px;
}

.app.fo-notify .statusbar { color: #fff; }

.fo-notify-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15px;
  padding-top: 8px;
}

.fo-notify-brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.app.fo-notify h2 {
  margin: auto 0 16px;
  max-width: 14ch;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.fo-drug {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  color: #E8A0A0;
}

.fo-when {
  margin: 0 0 28px;
  font-size: 20px;
  font-weight: 700;
  opacity: 0.9;
}

.fo-notify-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fo-nbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 800;
  min-height: 54px;
}

.fo-nbtn.primary { background: #fff; color: var(--fo-ink); }
.fo-nbtn.secondary { background: #2A3A38; color: #fff; min-height: 50px; font-weight: 750; }
.fo-nbtn.close {
  background: none;
  color: rgba(255, 255, 255, 0.65);
  min-height: 40px;
  font-size: 15px;
}

/* Calendario */
.fo-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.fo-switcher span {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--fo-border-strong);
  background: var(--fo-elev);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.fo-switcher span.on {
  background: var(--fo-accent);
  border-color: var(--fo-accent);
  color: #fff;
}

.fo-medname {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
}

.fo-medmeta {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fo-muted);
}

.fo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.fo-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fo-secondary);
  background: var(--fo-elev);
  border: 2px solid var(--fo-border);
  border-radius: 999px;
  padding: 5px 8px;
}

.fo-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

.fo-legend .dot.dose { background: var(--fo-accent); }
.fo-legend .dot.pause { background: #4A5560; }
.fo-legend .dot.taken { background: var(--fo-success); }
.fo-legend .dot.missed { background: var(--fo-danger); }

.fo-month-nav {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.fo-navbtn {
  width: 40px;
  height: 40px;
  border: 2px solid var(--fo-border);
  border-radius: 12px;
  background: var(--fo-elev);
  display: grid;
  place-items: center;
}

.fo-navbtn svg { width: 20px; height: 20px; }

.fo-month {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fo-month strong {
  font-size: 15px;
  font-weight: 800;
  text-transform: capitalize;
}

.fo-month small {
  font-size: 11px;
  font-weight: 700;
  color: var(--fo-muted);
}

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

.fo-day {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--fo-elev);
  border: 2px solid var(--fo-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.fo-num { font-size: 11px; font-weight: 800; line-height: 1; }
.fo-dico { display: grid; place-items: center; line-height: 1; }
.fo-dico svg { width: 11px; height: 11px; stroke-width: 2.4; }

.fo-pause { background: var(--fo-subtle); color: #4A5560; }
.fo-taken { background: var(--fo-success-soft); border-color: var(--fo-success); color: var(--fo-success); }
.fo-dose { background: var(--fo-accent-soft); border-color: var(--fo-accent); color: var(--fo-accent-strong); }
.fo-today {
  background: var(--fo-accent-soft);
  border-color: var(--fo-accent);
  color: var(--fo-accent-strong);
  outline: 3px solid var(--fo-accent);
  outline-offset: 1px;
}

.fo-end {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fo-muted);
  padding: 12px;
  background: var(--fo-elev);
  border: 2px solid var(--fo-border);
  border-radius: 16px;
}

.fo-end strong { color: var(--fo-text); }