/* MenuFamília — Styles v2.6 */

:root {
  --pri: #C2653A;
  --pri-lt: #E8A47A;
  --pri-bg: #FDF6EE;
  --sf: #FFFFFF;
  --sf2: #FFF8F2;
  --tx: #3D2B1F;
  --tx2: #8B7262;
  --tx3: #B8A99E;
  --ok: #5B8C5A;
  --ok-bg: #EDF5ED;
  --warn: #D4930D;
  --warn-bg: #FFF6E0;
  --err: #C0392B;
  --err-bg: #FDEDED;
  --brd: #EDE4DB;
  --r: 14px;
  --rs: 8px;
  --sh: 0 2px 12px rgba(61, 43, 31, .08);
  --th: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--pri-bg);
  color: var(--tx);
  min-height: 100dvh;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 16px; }

/* ── Login ── */
.login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(160deg, #FDF6EE, #F5E6D3);
}
.login h1 { font-size: 1.6rem; color: var(--pri); margin: .25rem 0; }
.login p { color: var(--tx2); margin-bottom: 2rem; font-size: .95rem; }
.login form { width: 100%; max-width: 320px; }

.lin {
  width: 100%; padding: 14px 16px; border: 2px solid var(--brd);
  border-radius: var(--rs); font-size: 1rem; background: var(--sf);
  margin-bottom: 12px; color: var(--tx); outline: none;
}
.lin:focus { border-color: var(--pri); }
.lbtn {
  width: 100%; padding: 14px; background: var(--pri); color: #fff;
  border-radius: var(--rs); font-size: 1.05rem; font-weight: 600; margin-top: 8px;
}
.lbtn:disabled { opacity: .5; }
.lerr { color: var(--err); font-size: .85rem; margin-top: 8px; text-align: center; }

/* ── App shell ── */
.app { display: none; min-height: 100dvh; padding-bottom: var(--th); }
.app.on { display: block; }

.hdr {
  padding: 14px 20px 10px; background: var(--sf); border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.hdr-g { font-size: .8rem; color: var(--tx2); }
.hdr-t { font-size: 1.1rem; font-weight: 700; color: var(--pri); }
.hdr-r { display: flex; align-items: center; gap: 8px; }
.hdr-a { font-size: 1.4rem; }
.hdr-imp {
  width: 32px; height: 32px; border-radius: 50%; background: var(--pri-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; border: 1px solid var(--brd);
}

/* ── Tab bar ── */
.tbar {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--th);
  background: var(--sf); border-top: 1px solid var(--brd);
  display: flex; z-index: 100; padding-bottom: env(safe-area-inset-bottom);
}
.tb {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--tx3);
  font-size: .65rem; font-weight: 500; position: relative;
}
.tb.on { color: var(--pri); }
.tb i { font-size: 1.5rem; line-height: 1; font-style: normal; }
.tbg {
  position: absolute; top: 4px; right: calc(50% - 22px);
  background: var(--err); color: #fff; font-size: .55rem;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; padding: 0 4px;
}

/* ── Tab content ── */
.tc { display: none; padding: 16px; }
.tc.on { display: block; }

/* ── Week nav ── */
.wn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; margin-bottom: 8px;
}
.wb {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--pri); background: var(--sf); border: 1px solid var(--brd);
}
.wb:active { background: var(--pri-bg); }
.wl { font-size: .95rem; font-weight: 600; color: var(--tx); }
.wt {
  font-size: .75rem; color: var(--pri); font-weight: 600;
  padding: 4px 10px; border: 1px solid var(--pri); border-radius: 20px; margin-left: 8px;
}

/* ── Day card ── */
.dc {
  background: var(--sf); border-radius: var(--r); padding: 14px 16px;
  margin-bottom: 10px; box-shadow: var(--sh); border-left: 4px solid transparent;
}
.dc.tod { border-left-color: var(--pri); background: var(--sf2); }
.dc.past { opacity: .65; }
.dc.past .dh { cursor: pointer; user-select: none; }
.dc.past.collapsed .dh { margin-bottom: 0; }
.dc.past.collapsed .mr { display: none; }
.dc-summary { display: none; font-size: .78rem; color: var(--tx2); padding: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc.past.collapsed .dc-summary { display: block; }
.dc-chev { font-size: .85rem; color: var(--tx3); transition: transform .2s; display: inline-block; }
.dc.past:not(.collapsed) .dc-chev { transform: rotate(90deg); }
.dh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dn { font-size: .95rem; font-weight: 700; }
.dn.tl { color: var(--pri); }
.dd { font-size: .8rem; color: var(--tx2); }
.da { font-size: .75rem; padding: 3px 8px; border-radius: 20px; font-weight: 500; }
.da.f { background: var(--ok-bg); color: var(--ok); }
.da.p { background: var(--warn-bg); color: var(--warn); }

/* ── Meal row ── */
.mr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--brd); }
.mt { font-size: .75rem; font-weight: 600; color: var(--tx2); min-width: 55px; text-transform: uppercase; }
.mn { font-size: 1rem; flex: 1; display: flex; align-items: center; gap: 6px; }
.mn-txt { flex: 1; min-width: 0; word-break: break-word; overflow-wrap: anywhere; }
.mno { font-size: .75rem; color: var(--tx2); font-style: italic; }
.me { color: var(--tx3); font-style: italic; font-size: .9rem; }

/* ── Buttons ── */
.mb {
  width: 44px; height: 44px; border-radius: 50%; background: var(--pri-bg); color: var(--pri);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.mb:active { background: var(--pri-lt); color: #fff; }

.mbs {
  width: 32px; height: 32px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--pri-bg); color: var(--pri);
  border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}

.ing-badge {
  font-size: .7rem; font-weight: 700; padding: 2px 6px; border-radius: 10px;
  border: 1px solid var(--brd); background: var(--sf); cursor: pointer;
  flex-shrink: 0; line-height: 1.6; white-space: nowrap;
}
.ing-badge.ok   { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.ing-badge.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.mc-lbl {
  font-size: .6rem; font-weight: 700; background: var(--brd); color: var(--tx2);
  border-radius: 4px; padding: 1px 4px; margin-right: 3px; vertical-align: middle;
}


/* ── Recipe picker button ── */
.rec-pick-btn {
  width: 100%; padding: 12px 14px; background: var(--sf); border: 1.5px solid var(--brd);
  border-radius: var(--rs); font-size: .95rem; color: var(--tx3);
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; text-align: left; min-height: 48px;
}
.rec-pick-btn.has-rec { color: var(--tx); font-weight: 500; }

/* ── Recipe picker modal ── */
.rp-chip {
  padding: 7px 12px; border-radius: 20px; border: 1.5px solid var(--brd);
  font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--sf); color: var(--tx2);
}
.rp-chip.on { background: var(--pri); color: #fff; border-color: var(--pri); }
.rp-sec {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  color: var(--tx3); letter-spacing: .06em; padding: 14px 0 6px;
}
.rp-item {
  padding: 13px 6px; border-bottom: 1px solid var(--brd);
  display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 6px;
}
.rp-item:active { background: var(--pri-bg); }
.rp-name { font-size: .95rem; flex: 1; line-height: 1.3; }
.rp-tag { font-size: .68rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.rp-dim { opacity: .4; }

/* Recipe type tags */
.rt-carn    { background: #FDECEA; color: #C0392B; }
.rt-peix    { background: #EAF2FB; color: #2471A3; }
.rt-pasta   { background: #FEF9E7; color: #B7950B; }
.rt-verdura { background: #EAFAF1; color: #1E8449; }
.rt-llegums { background: #F4ECF7; color: #6C3483; }
.rt-ous     { background: #FDF2E9; color: #A04000; }
.rt-especial{ background: #F5EEF8; color: #7D3C98; }

/* ── Recipe list ── */
.rec-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--brd); }
.rec-info { flex: 1; min-width: 0; }
.rec-nm { font-size: .95rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-meta { font-size: .75rem; color: var(--tx2); margin-top: 2px; }

/* ── Attendance table ── */
.ag { background: var(--sf); border-radius: var(--r); padding: 16px; box-shadow: var(--sh); overflow-x: auto; }
.at { width: 100%; border-collapse: collapse; }
.at th { font-size: .75rem; font-weight: 600; color: var(--tx2); padding: 8px 4px; text-align: center; }
.at td { padding: 6px 4px; text-align: center; }
.at .ad { text-align: left; font-weight: 600; font-size: .85rem; }
.ac {
  width: 40px; height: 40px; border-radius: var(--rs);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.ac.h { background: var(--ok-bg); color: var(--ok); }
.ac.a { background: var(--err-bg); color: var(--err); text-decoration: line-through; }
.ac:active { transform: scale(.9); }
.as { margin-top: 12px; padding: 12px; background: var(--warn-bg); border-radius: var(--rs); font-size: .85rem; color: var(--warn); }

/* ── Shopping list ── */
.sc { margin-bottom: 20px; }
.sct {
  font-size: .8rem; font-weight: 700; color: var(--tx2); text-transform: uppercase;
  letter-spacing: .5px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--brd);
}
.si { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--brd); }
.sk {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--brd);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.sk.c { background: var(--ok); border-color: var(--ok); }
.sk.c::after { content: '\2713'; color: #fff; font-size: .85rem; }
.sn { flex: 1; font-size: 1rem; cursor: pointer; }
.sn:not(.c):hover { text-decoration: underline; }
.sn.c { text-decoration: line-through; color: var(--tx3); }
.sq { font-size: .85rem; color: var(--tx2); }
.sno { font-size: .8rem; color: var(--tx3); margin-top: 2px; }
.swab { display: flex; gap: 8px; margin-bottom: 8px; justify-content: flex-end; }

/* Chips (recurrents) */
.chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: none; margin-bottom: 4px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  padding: 6px 12px; background: var(--sf); border: 1px solid var(--brd);
  border-radius: 20px; font-size: .82rem; white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.chip:active { background: var(--pri); color: #fff; border-color: var(--pri); }

/* Autocomplete */
.acw { position: relative; }
.acd {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: var(--sf); border: 1px solid var(--brd); border-radius: var(--rs);
  box-shadow: var(--sh); z-index: 100; max-height: 200px; overflow-y: auto;
}
.aci { padding: 12px; border-bottom: 1px solid var(--brd); cursor: pointer; font-size: .95rem; }
.aci:last-child { border-bottom: none; }
.aci:active { background: var(--pri); color: #fff; }

.sx {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tx3); font-size: 1.1rem;
}
.sx:active { color: var(--err); }

/* Add-item bar */
.sab {
  position: sticky; bottom: calc(var(--th) + 12px); padding: 12px;
  background: var(--sf); border-radius: var(--r); box-shadow: var(--sh); margin-top: 16px;
}
.sai { flex: 1; padding: 12px; border: 2px solid var(--brd); border-radius: var(--rs); font-size: 1rem; outline: none; }
.sai:focus { border-color: var(--pri); }
.sas {
  padding: 8px 10px; border: 2px solid var(--brd); border-radius: var(--rs);
  font-size: .85rem; outline: none; background: var(--sf); color: var(--tx); width: 100%;
}
.sab2 { padding: 12px 20px; background: var(--pri); color: #fff; border-radius: var(--rs); font-weight: 600; font-size: 1rem; white-space: nowrap; }

/* ── Pantry ── */
.pz { margin-bottom: 20px; }
.pzt { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
.pi {
  background: var(--sf); border-radius: var(--rs); padding: 12px 14px; margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 1px 4px rgba(61, 43, 31, .05);
}
.pid { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--tx3); font-size: 1.1rem; flex-shrink: 0; }
.pid:active { color: var(--err); background: var(--err-bg); }
.pin { font-size: .95rem; font-weight: 500; }
.piq { font-size: .85rem; color: var(--tx2); }
.pie { font-size: .75rem; margin-top: 2px; }
.pie.ok { color: var(--ok); }
.pie.w  { color: var(--warn); }
.pie.d  { color: var(--err); font-weight: 600; }
.peb { background: var(--err-bg); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; border-left: 4px solid var(--err); }
.pet { font-size: .85rem; font-weight: 700; color: var(--err); margin-bottom: 6px; }
.pei { font-size: .9rem; color: var(--tx); padding: 2px 0; }

/* ── Modals ── */
.mo {
  display: none; position: fixed; inset: 0;
  background: rgba(61, 43, 31, .4); z-index: 200;
  align-items: flex-end; justify-content: center;
}
.mo.on { display: flex; }
.md {
  background: var(--sf); border-radius: var(--r) var(--r) 0 0;
  width: 100%; max-width: 500px; max-height: 85dvh;
  padding: 20px; overflow-y: auto; animation: su .25s ease-out;
}
@keyframes su { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mdt { font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.mdc { width: 36px; height: 36px; border-radius: 50%; background: var(--pri-bg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Form elements */
.fg { margin-bottom: 14px; }
.fl { display: block; font-size: .85rem; font-weight: 600; color: var(--tx2); margin-bottom: 6px; }
.fi { width: 100%; padding: 12px; border: 2px solid var(--brd); border-radius: var(--rs); font-size: 1rem; outline: none; background: var(--sf); }
.fi:focus { border-color: var(--pri); }
.fs { width: 100%; padding: 12px; border: 2px solid var(--brd); border-radius: var(--rs); font-size: 1rem; outline: none; background: var(--sf); color: var(--tx); }
.fb { width: 100%; padding: 14px; background: var(--pri); color: #fff; border-radius: var(--rs); font-size: 1.05rem; font-weight: 600; margin-top: 8px; }
.fb:active { opacity: .8; }
.fd { width: 100%; padding: 12px; color: var(--err); border: 1px solid var(--err-bg); background: var(--err-bg); border-radius: var(--rs); font-size: .95rem; font-weight: 500; margin-top: 8px; }

/* Empty state */
.es { text-align: center; padding: 3rem 1rem; color: var(--tx3); }
.es b { font-size: 3rem; display: block; margin-bottom: .5rem; }
.es span { font-size: .95rem; line-height: 1.5; }

/* FAB */
.fab {
  position: fixed; bottom: calc(var(--th) + 20px); right: 20px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--pri); color: #fff; font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(194, 101, 58, .35); z-index: 50;
}
.fab:active { transform: scale(.9); }

/* Toast */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; background: var(--tx); color: #fff;
  border-radius: var(--r); font-size: .9rem; z-index: 300;
  opacity: 0; transition: opacity .3s; pointer-events: none; max-width: 90%;
  display: flex; align-items: center; gap: 10px;
}
.toast.on { opacity: 1; pointer-events: auto; }
.toast-cls { background: none; border: none; color: rgba(255,255,255,.7); font-size: 1.1rem; padding: 0; cursor: pointer; flex-shrink: 0; line-height: 1; }

/* Settings */
.stb { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 0; font-size: .95rem; color: var(--tx2); border-bottom: 1px solid var(--brd); }
.stb:active { color: var(--pri); }

/* Import */
.imp-ta {
  width: 100%; min-height: 180px; padding: 12px; border: 2px solid var(--brd);
  border-radius: var(--rs); font-size: .85rem; font-family: monospace;
  outline: none; resize: vertical; background: var(--sf);
}
.imp-ta:focus { border-color: var(--pri); }
.imp-prev { background: var(--ok-bg); border-radius: var(--rs); padding: 12px; margin: 12px 0; font-size: .9rem; max-height: 200px; overflow-y: auto; }
.imp-err  { background: var(--err-bg); border-radius: var(--rs); padding: 12px; margin: 12px 0; font-size: .9rem; color: var(--err); }

/* ── Avui card ── */
.avui-card { background: var(--sf); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--sh); border-left: 4px solid var(--pri); }
.avui-head { font-size: .85rem; font-weight: 700; color: var(--pri); margin-bottom: 8px; }
.avui-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-top: 1px solid var(--brd); border-radius: 4px; margin: 0 -4px;
}
.avui-row:active { background: var(--pri-bg); }
.avui-row[onclick] { cursor: pointer; }
.avui-mt { font-size: .75rem; font-weight: 600; color: var(--tx2); min-width: 58px; text-transform: uppercase; }
.avui-mn { font-size: 1rem; flex: 1; }
.avui-ppl { font-size: .8rem; color: var(--tx2); margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--brd); }
.avui-empty { font-size: .9rem; color: var(--tx3); font-style: italic; padding: 8px 0; }

/* ── Cooking mode ── */
.cook { display: none; position: fixed; inset: 0; background: #fff; z-index: 500; flex-direction: column; }
.cook.on { display: flex; }
.cook-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--brd); flex-shrink: 0; }
.cook-prog { font-size: .9rem; color: var(--tx2); font-weight: 600; }
.cook-exit { padding: 10px 16px; font-size: .9rem; color: var(--tx2); border: 1px solid var(--brd); border-radius: var(--rs); background: var(--sf); }
.cook-body { flex: 1; overflow-y: auto; padding: 28px 24px; display: flex; flex-direction: column; justify-content: flex-start; }
.cook-step-txt { font-size: 1.4rem; line-height: 1.65; color: var(--tx); font-weight: 400; }
.cook-tmr {
  display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px;
  background: var(--warn-bg); border-radius: var(--r);
  cursor: pointer; border: none; width: 100%; text-align: left;
}
.cook-tmr-val { font-size: 1.3rem; font-weight: 700; color: var(--warn); }
.cook-tmr-lbl { font-size: .8rem; color: var(--tx2); }
.cook-nav { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--brd); flex-shrink: 0; }
.cook-btn { flex: 1; padding: 20px; border-radius: var(--rs); font-size: 1.05rem; font-weight: 600; border: 2px solid var(--brd); color: var(--tx2); background: var(--sf); }
.cook-btn.nxt { background: var(--pri); color: #fff; border-color: var(--pri); }
.cook-btn:disabled { opacity: .25; }
.cook-ing-tgl { padding: 12px 20px; border-top: 1px solid var(--brd); font-size: .88rem; color: var(--pri); font-weight: 600; text-align: center; cursor: pointer; flex-shrink: 0; }
.cook-ing-lst { padding: 12px 20px; border-top: 1px solid var(--brd); background: var(--pri-bg); display: none; overflow-y: auto; max-height: 35dvh; }
.cook-ing-lst.open { display: block; }
.cook-ing-item { font-size: .9rem; padding: 4px 0; color: var(--tx2); }

/* ── Utility ── */
.hid { display: none !important; }

/* ── Onboarding ── */
.ob-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: linear-gradient(160deg, #FDF6EE, #F5E6D3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.ob-skip {
  position: absolute; top: 20px; right: 20px;
  font-size: .9rem; color: var(--tx3); padding: 6px 10px;
}
.ob-wrap { max-width: 360px; width: 100%; text-align: center; }
.ob-content { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ob-emoji { font-size: 4rem; margin-bottom: 18px; }
.ob-title { font-size: 1.35rem; font-weight: 700; color: var(--tx); margin-bottom: 14px; line-height: 1.3; }
.ob-body { font-size: .97rem; color: var(--tx2); line-height: 1.65; }
.ob-highlight { display: inline-block; background: var(--pri-bg); border: 1px solid var(--brd); border-radius: 6px; padding: 2px 7px; font-weight: 600; color: var(--tx); margin: 2px; }
.ob-dots { display: flex; gap: 8px; justify-content: center; margin: 28px 0 24px; }
.ob-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brd); transition: background .25s, transform .25s; }
.ob-dot.on { background: var(--pri); transform: scale(1.2); }
.ob-btn {
  width: 100%; padding: 16px; background: var(--pri); color: #fff;
  border-radius: var(--rs); font-size: 1.05rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(194, 101, 58, .3);
}