:root {
  color-scheme: light;
  --cafe: #502617;
  --cafe-forte: #3E1D11;
  --solo: #FBF3E1;
  --terra: #FFFBF2;
  --turfa: #F4E7CD;
  --linha: #DFCBA8;
  --papel: #FFFFFF;
  --papel-2: #F6EBD4;
  --tinta: #3E1D11;
  --tinta-suave: #7A5F4B;
  --ocre: #F4BD38;
  --ocre-forte: #FBCB52;
  --siena: #C75B2A;
  --barro: #B8875A;
  --oliva: #6B7A2E;
  --erro: #B23A1E;
  --texto: #3E1D11;
  --texto-suave: #75594A;
  --sombra: rgba(80, 38, 23, .14);
  --mola: cubic-bezier(.2, .9, .3, 1.15);
  --suave: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--solo); color: var(--texto);
  font: 400 15.5px/1.5 Montserrat, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3 { font-family: inherit; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.025em; color: var(--cafe); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ocre-forte); outline-offset: 2px; }

/* Camadas de solo */
.bg-strata { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; display: block; width: 100%; height: 24vh; pointer-events: none; opacity: .75; }
.bg-strata path:nth-child(1) { fill: #F7ECD6; }
.bg-strata path:nth-child(2) { fill: #F4E7CD; }
.bg-strata path:nth-child(3) { fill: #F0E0C2; }
.bg-strata path:nth-child(4) { fill: #ECD9B6; }
.topbar { position: relative; z-index: 10; }
main#view { position: relative; z-index: 1; }

/* Controles */
input, textarea, select {
  width: 100%; padding: .55rem .7rem; font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--linha); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(244, 189, 56, .35); }
input::placeholder, textarea::placeholder { color: #9A8370; }
textarea { resize: vertical; min-height: 5rem; }
label { display: block; font-weight: 700; font-size: .92rem; color: var(--texto-suave); }
label input, label textarea, label select { margin-top: .3rem; font-weight: 400; font-size: 1rem; color: var(--texto); }
.btn {
  display: inline-block; padding: .5rem .95rem; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  color: var(--cafe); background: transparent; border: 1.5px solid var(--linha); border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s, transform .12s var(--suave);
}
.btn:hover { background: var(--turfa); border-color: var(--cafe); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-primary { color: var(--tinta); background: var(--ocre); border-color: var(--ocre); }
.btn-primary:hover { background: var(--ocre-forte); border-color: var(--ocre-forte); }
.btn-danger { color: var(--erro); border-color: #E2B3A3; }
.btn-danger:hover { color: #fff; background: var(--erro); border-color: var(--erro); }
.btn-full { width: 100%; }
.btn-small { padding: .25rem .6rem; font-size: .9rem; }
.link-btn { padding: .2rem; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; transition: color .15s; }
.link-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.icon-btn { width: 2rem; height: 2rem; padding: 0; font: inherit; font-weight: 700; color: var(--texto-suave); background: none; border: 0; border-radius: 6px; cursor: pointer; flex: none; transition: background .15s, color .15s; }
.icon-btn:hover { color: var(--texto); background: var(--turfa); }

/* Login */
.login-page { align-items: center; justify-content: center; padding: 16px; overflow: hidden; background: var(--cafe); }
.login-strata { position: fixed; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 62vh; }
.login-strata path { animation: rise .9s var(--suave) backwards; }
.login-strata path:nth-child(1) { fill: #6B3A22; animation-delay: .05s; }
.login-strata path:nth-child(2) { fill: #A8562A; animation-delay: .15s; }
.login-strata path:nth-child(3) { fill: #DB8A2E; animation-delay: .25s; }
.login-strata path:nth-child(4) { fill: var(--ocre); animation-delay: .35s; }
.login-box { position: relative; width: 100%; max-width: 25rem; padding: 2.2rem; background: var(--terra); border-radius: 22px; box-shadow: 0 30px 70px rgba(30, 12, 5, .45); animation: pop-in .6s .3s var(--suave) backwards; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1.6rem; text-align: center; }
.login-brand img { width: 76px; height: 76px; animation: sprout .7s .55s var(--mola) backwards; }
.login-brand h1 { font-size: 1.9rem; }
.login-box form { display: grid; gap: 1rem; }
.form-error { padding: .5rem .7rem; color: var(--erro); background: #FBE7DF; border-left: 3px solid var(--erro); border-radius: 3px; animation: nudge .35s var(--suave); }

/* Topo */
.topbar { --texto: #FFF4DC; --texto-suave: #E6CFAC; --turfa: #6A3A24; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.8rem; padding: .7rem 1.5rem; color: var(--texto); background: var(--cafe); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.22rem; letter-spacing: -.02em; text-decoration: none; }
.brand img { display: block; width: 36px; height: 36px; transition: transform .35s var(--mola); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.topbar nav { display: flex; flex-wrap: wrap; gap: .25rem; }
.topbar nav a { padding: .3rem .85rem; font-weight: 500; color: var(--texto-suave); text-decoration: none; border-radius: 999px; transition: background .18s, color .18s; }
.topbar nav a:hover { color: var(--texto); background: var(--turfa); }
.topbar nav a.current { color: var(--tinta); font-weight: 700; background: var(--ocre); }
.account { display: flex; align-items: center; gap: .9rem; margin-left: auto; color: var(--texto-suave); }
.account form { margin: 0; }

/* Sino */
.bell-wrap { position: relative; display: flex; }
.bell { position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; color: var(--texto-suave); background: none; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.bell:hover, .bell[aria-expanded="true"] { color: var(--texto); background: var(--turfa); }
.bell-count { color: var(--tinta); position: absolute; top: -1px; right: -3px; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; font-size: .72rem; font-weight: 700; line-height: 1.15rem; text-align: center; color: var(--tinta); background: var(--ocre-forte); border-radius: 999px; animation: check .35s var(--mola); }
.bell-panel { position: absolute; top: calc(100% + .55rem); right: 0; width: min(23rem, calc(100vw - 32px)); max-height: min(26rem, calc(100vh - 6rem)); padding: .9rem; overflow-y: auto; --texto: #3E1D11; --texto-suave: #75594A; --turfa: #F4E7CD; color: var(--texto); background: var(--terra); border-radius: 16px; box-shadow: 0 20px 50px rgba(62, 29, 17, .35); animation: slide-in .16s var(--suave); }
.bell-panel h2 { margin-bottom: .55rem; font-size: 1.02rem; }
.bell-panel ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.bell-panel a { display: block; padding: .5rem .6rem; text-decoration: none; border-radius: 8px; overflow-wrap: anywhere; transition: background .15s; }
.bell-panel a:hover { background: var(--turfa); }
.bell-panel strong { display: block; font-weight: 600; }
.bell-panel a span { display: block; font-size: .88rem; color: var(--texto-suave); }

/* Calendário */
.page-wide { max-width: 78rem; }
.cal-title { min-width: 15rem; font-size: 1.5rem; text-align: center; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--linha); border: 1px solid var(--linha); border-radius: 18px; }
.cal-head { padding: .55rem .7rem; font-size: .85rem; font-weight: 700; color: #FFF4DC; background: var(--cafe); }
.cal-day { display: flex; flex-direction: column; gap: .2rem; min-width: 0; min-height: 6.6rem; padding: .4rem; background: var(--terra); }
.cal-day.blank { background: var(--papel-2); }
.cal-date { padding: 0 .15rem; }
.cal-weekday { display: none; }
.cal-number { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; font-size: .9rem; color: var(--texto-suave); border-radius: 999px; }
.cal-day.today .cal-number { font-weight: 700; color: var(--tinta); background: var(--ocre); }
.cal-task { box-shadow: inset 0 0 0 1px var(--linha); display: block; padding: .12rem .45rem; overflow: hidden; font-size: .84rem; font-weight: 500; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta); background: var(--papel-2); border-radius: 5px; transition: filter .15s, transform .15s var(--suave); }
.cal-task:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cal-task.today { background: var(--ocre); box-shadow: none; }
.cal-task.late { color: #fff6ec; background: #a23f1f; box-shadow: none; }
.cal-task.done { color: var(--texto-suave); text-decoration: line-through; background: var(--papel-2); box-shadow: none; }
.cal-empty { margin-top: 1rem; text-align: center; }

/* Páginas */
main#view { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.page { width: 100%; max-width: 64rem; margin: 0 auto; padding: 2.2rem 1.5rem 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.6rem; }
.page-head .muted { margin-top: .25rem; }
.muted { color: var(--texto-suave); }
.empty { padding: 3rem 1.25rem; text-align: center; background: var(--terra); border: 1.5px dashed var(--linha); border-radius: 18px; }
.empty p { margin-bottom: 1rem; }

/* Áreas */
.hero { position: relative; min-height: 11.5rem; margin-bottom: 1.8rem; padding: 2rem 2.2rem; overflow: hidden; color: #FFF4DC; background: var(--cafe) url("hero.svg") no-repeat bottom right / 100% 100%; border-radius: 22px; }
.hero h1 { color: #FFF4DC; font-size: 2.3rem; }
.hero p { max-width: 30rem; margin-top: .35rem; color: #EBD7B7; }
.area-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.area-list li:nth-child(4n+1) .area { --cor: var(--ocre); }
.area-list li:nth-child(4n+2) .area { --cor: var(--siena); }
.area-list li:nth-child(4n+3) .area { --cor: var(--oliva); }
.area-list li:nth-child(4n+4) .area { --cor: var(--barro); }
.area { position: relative; display: block; height: 100%; min-height: 8.5rem; padding: 1.15rem 1.25rem 1.6rem; overflow: hidden; text-decoration: none; background: var(--terra); border: 1px solid var(--turfa); border-radius: 18px; transition: transform .22s var(--suave), border-color .22s, box-shadow .22s; }
.area::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--cor); transition: height .22s var(--suave); }
.area:hover { transform: translateY(-3px); border-color: var(--cor); box-shadow: 0 12px 28px var(--sombra); }
.area:hover::after { height: 11px; }
.area p { margin-top: .35rem; overflow-wrap: anywhere; }
.area h2 { overflow-wrap: anywhere; }

/* Abas da área */
.area-tabs { display: inline-flex; gap: .2rem; margin-bottom: 1.4rem; padding: .25rem; background: var(--terra); border: 1px solid var(--turfa); border-radius: 999px; }
.tab { padding: .3rem 1.1rem; color: var(--texto-suave); text-decoration: none; border-radius: 999px; transition: background .18s, color .18s; }
.tab:hover { color: var(--texto); background: var(--turfa); }
.tab.current { font-weight: 700; color: #FFF4DC; background: var(--cafe); }

/* Meses */
.year-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.2rem; }
.year-nav h2 { min-width: 4.5rem; font-size: 1.6rem; text-align: center; }
.year-step { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.4rem; line-height: 1; text-decoration: none; color: var(--texto-suave); border: 1px solid var(--linha); border-radius: 999px; transition: background .15s, color .15s, border-color .15s; }
.year-step:hover { color: var(--texto); background: var(--turfa); border-color: var(--barro); }
.year-step.off { opacity: .3; pointer-events: none; }
.month-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.month { display: flex; flex-direction: column; gap: .15rem; height: 100%; min-height: 6.6rem; padding: .9rem 1rem; text-decoration: none; background: var(--terra); border: 1px solid var(--turfa); border-radius: 18px; transition: transform .2s var(--suave), border-color .2s, box-shadow .2s, background .2s; }
.month:hover { transform: translateY(-3px); background: var(--turfa); border-color: var(--barro); box-shadow: 0 12px 26px var(--sombra); }
.month strong { font-size: 1.05rem; font-weight: 700; }
.month-info { font-size: .92rem; color: var(--texto-suave); }
.month.blank { background: rgba(255, 251, 242, .6); }
.month .bar { margin-top: auto; height: 6px; }
.month.complete .bar i { background: var(--oliva); }
.month.current { color: var(--tinta); background: var(--ocre); border-color: var(--ocre); }
.month.current:hover { background: var(--ocre-forte); border-color: var(--ocre-forte); }
.month.current .month-info { color: #5C3A10; }
.month.current .bar { background: rgba(42, 27, 17, .25); }
.month.current .bar i { background: var(--tinta); }

/* Quadro */
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1.2rem 1.5rem .3rem; }
.board-head .muted { font-size: .95rem; }
.board-head h1 { font-size: 1.7rem; overflow-wrap: anywhere; }
.board-head .actions { display: flex; gap: .5rem; margin-left: auto; }
.board { flex: 1; display: flex; align-items: flex-start; gap: .9rem; padding: .85rem 1.5rem 1.5rem; overflow-x: auto; }
.column { flex: 0 0 19rem; max-width: 86vw; display: flex; flex-direction: column; max-height: calc(100vh - 11.5rem); min-height: 7rem; background: var(--turfa); border: 0; border-top: 5px solid var(--cor, var(--ocre)); border-radius: 14px; transition: border-color .15s, background .15s; }
.column:nth-child(4n+1) { --cor: var(--ocre); }
.column:nth-child(4n+2) { --cor: var(--siena); }
.column:nth-child(4n+3) { --cor: var(--oliva); }
.column:nth-child(4n+4) { --cor: var(--barro); }
.column.drop { background: var(--papel-2); box-shadow: inset 0 0 0 2px var(--cor); }
.column-head { display: flex; align-items: center; gap: .2rem; padding: .6rem .4rem .35rem .85rem; }
.column-head h2 { flex: 1; min-width: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
.count { min-width: 1.5rem; padding: 0 .4rem; font-size: .85rem; font-weight: 600; text-align: center; color: var(--texto-suave); background: var(--terra); border-radius: 999px; }
.cards { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-height: 1rem; padding: .3rem .55rem; overflow-y: auto; list-style: none; margin: 0; }
.cards.open { overflow: visible; }
.card { position: relative; display: block; width: 100%; padding: .7rem .8rem; text-align: left; font: inherit; color: var(--tinta); background: var(--papel); border: 0; border-radius: 12px; box-shadow: 0 1px 3px var(--sombra); cursor: grab; transition: transform .18s var(--suave), box-shadow .18s, background .18s, opacity .15s; }
.card:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px var(--sombra); }
.card:active { cursor: grabbing; }
.card.dragging { opacity: .35; transform: scale(.97); }
.card strong { display: block; overflow-wrap: anywhere; }
.card .subject { display: -webkit-box; margin-top: .15rem; overflow: hidden; font-size: .92rem; color: var(--tinta-suave); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.progress { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; color: var(--tinta-suave); }
.layers { flex: 1; display: flex; gap: 2px; height: 6px; }
.layers i { flex: 1; background: #EADBBE; border-radius: 1px; }
.layers i.on { background: var(--siena); }
.card.complete .layers i.on { background: #6f7a2f; }
.card.complete .progress { color: #58621f; font-weight: 700; }
.due-tag { display: inline-block; margin-top: .45rem; padding: .05rem .5rem; font-size: .82rem; font-weight: 600; color: var(--tinta-suave); background: var(--papel-2); border-radius: 999px; }
.due-tag.today { color: #5c3d07; background: #f0cf8d; }
.due-tag.late { color: #fff6ec; background: #a23f1f; }
.drop-slot { list-style: none; background: rgba(244, 189, 56, .18); border: 1.5px dashed var(--barro); border-radius: 8px; animation: open-slot .16s var(--suave); }
.add-card { margin: .4rem .55rem .6rem; }
.add-card .btn { width: 100%; color: var(--texto-suave); border-color: transparent; text-align: left; }
.add-card .btn:hover { color: var(--texto); background: var(--papel-2); border-color: transparent; }
.add-column { flex: 0 0 15rem; }
.add-column .btn { color: var(--texto-suave); border-style: dashed; }

/* Diálogo */
dialog { width: min(40rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; color: inherit; background: var(--terra); border: 0; border-radius: 22px; box-shadow: 0 30px 80px rgba(62, 29, 17, .35); }
dialog[open] { animation: pop-in .24s var(--mola); }
dialog::backdrop { background: rgba(62, 29, 17, .5); backdrop-filter: blur(3px); animation: fade .2s; }
.dlg { padding: 1.4rem; }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.dlg-head h2 { overflow-wrap: anywhere; }
.stack { display: grid; gap: .9rem; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.dlg-actions .left { margin-right: auto; }
.dlg-error { color: var(--erro); font-weight: 700; animation: nudge .35s var(--suave); }
.section-title { margin: 1.5rem 0 .6rem; }

/* Card aberto */
.card-head { display: flex; align-items: flex-start; gap: .15rem; margin: -.25rem -.4rem .1rem -.55rem; }
.card-title, .card-legend { display: block; width: 100%; overflow: hidden; resize: none; min-height: 0; background: transparent; border-color: transparent; }
.card-title { flex: 1; min-width: 0; padding: .2rem .55rem; font-size: 1.5rem; font-weight: 800; color: var(--cafe); line-height: 1.25; letter-spacing: -.015em; }
.card-legend { margin: 0 -.55rem; width: calc(100% + 1.1rem); padding: .3rem .55rem; color: var(--texto-suave); }
.card-title:hover, .card-legend:hover { background: var(--papel-2); }
.card-title:focus, .card-legend:focus { color: var(--texto); background: #fff; }
.card-menu { display: grid; gap: .75rem; margin: .5rem 0 .75rem; padding: .8rem; background: var(--turfa); border-radius: 10px; animation: slide-in .2s var(--suave); }
.tasks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.3rem 0 .45rem; }
.tasks-count { font-size: .92rem; color: var(--texto-suave); }
.tasks-count.complete { color: var(--oliva); font-weight: 700; }
.bar { height: 6px; overflow: hidden; background: var(--papel-2); border-radius: 999px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--siena), var(--ocre)); border-radius: 999px; transition: width .45s var(--suave), background .3s; }
.bar.complete i { background: var(--oliva); }
.tasks { margin: .55rem -.55rem .6rem; }
.task-add { margin-top: .2rem; }

/* Tarefas e checklist */
.work { padding: .25rem .55rem; border-radius: 8px; transition: background .15s; }
.work.pop { animation: glow .7s var(--suave); }
.work-head, .item { display: flex; align-items: center; gap: .6rem; min-height: 2rem; }
.work-head .name { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.work.done .work-head .name, .item.done .text { color: var(--texto-suave); text-decoration: line-through; }
.row-btn { flex: none; width: 1.7rem; height: 1.7rem; padding: 0; font: inherit; font-weight: 700; color: var(--texto-suave); background: none; border: 0; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s, background .15s, color .15s; }
.row-text { width: auto; padding: 0 .45rem; font-size: .82rem; font-weight: 600; }
.due-input { flex: none; width: 9.2rem; padding: .15rem .4rem; font-size: .88rem; }
.task-add .due-input { padding: .35rem .4rem; }
.work.done .due-input { color: var(--texto-suave); }
.due-note { flex: none; font-size: .82rem; font-weight: 700; }
.due-note.late { color: var(--erro); }
.due-note.today { color: #8A5D00; }
.row-btn:hover { color: var(--texto); background: var(--turfa); }
.work-head:hover .row-btn, .item:hover .row-btn, .row-btn:focus-visible { opacity: 1; }
@media (hover: none) { .row-btn { opacity: .75; } }
.work-tally { font-size: .88rem; color: var(--texto-suave); white-space: nowrap; }
.items { margin: 0; padding: 0; list-style: none; }
.item { padding-left: 1.8rem; }
.item .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.enter { animation: slide-in .26s var(--suave); }
input[type=checkbox] { position: relative; flex: none; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: #fff; border: 1.5px solid var(--barro); border-radius: 5px; cursor: pointer; transition: background .15s, border-color .15s; }
input[type=checkbox]:hover { border-color: var(--cafe); }
input[type=checkbox]:checked { background: var(--oliva); border-color: var(--oliva); }
input[type=checkbox]:checked::before { content: ""; width: .68rem; height: .68rem; background: #fff; clip-path: polygon(14% 50%, 0 65%, 40% 100%, 100% 20%, 85% 7%, 39% 70%); }
.pop > input[type=checkbox], .pop > .work-head > input[type=checkbox] { animation: check .32s var(--mola); }
.inline-add { display: flex; gap: .4rem; }
.inline-add input { flex: 1; min-width: 0; padding: .35rem .6rem; }
.work .inline-add { margin: .2rem 0 .3rem 1.8rem; animation: slide-in .18s var(--suave); }

/* Regras */
.rule-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.rule { display: block; width: 100%; padding: 1.05rem 1.25rem; font: inherit; color: inherit; text-align: left; cursor: pointer; background: var(--terra); border: 1px solid var(--turfa); border-radius: 12px; transition: transform .2s var(--suave), border-color .2s, box-shadow .2s; }
.rule:hover { transform: translateY(-2px); border-color: var(--barro); box-shadow: 0 10px 24px var(--sombra); }
.rule-name { display: block; font-size: 1.15rem; overflow-wrap: anywhere; }
.rule-legend { display: block; margin-top: .15rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.rule-view-legend { margin: -.5rem 0 1rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.rule-view-text { line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.rule-description { min-height: 11rem; }

/* Equipe */
.team { width: 100%; border-collapse: collapse; background: var(--terra); border-radius: 12px; overflow: hidden; }
.team th, .team td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--turfa); overflow-wrap: anywhere; }
.team th { font-size: .92rem; color: var(--texto-suave); }
.team tr:last-child td { border-bottom: 0; }
.team .acts { display: flex; flex-wrap: wrap; gap: .35rem; }
.area-checks { display: grid; gap: .45rem; margin: 0; padding: .7rem .8rem; border: 1px solid var(--linha); border-radius: 8px; }
.area-checks legend { padding: 0 .3rem; font-size: .92rem; font-weight: 700; color: var(--texto-suave); }
.area-checks .check-line { overflow-wrap: anywhere; cursor: pointer; }
.check-line { display: flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--texto); }

#toast { position: fixed; bottom: 1.2rem; left: 50%; z-index: 20; max-width: calc(100vw - 32px); padding: .55rem 1.1rem; font-weight: 700; color: #FFF4DC; background: var(--cafe); border-radius: 999px; box-shadow: 0 10px 30px var(--sombra); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .28s var(--mola); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { color: #fff; background: var(--erro); border-radius: 12px; }

@keyframes sprout { from { opacity: 0; transform: scale(.6) rotate(-14deg); } }
@keyframes rise { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes open-slot { from { opacity: 0; transform: scaleY(.6); } }
@keyframes check { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes glow { 0% { background: rgba(107, 122, 46, .28); } 100% { background: transparent; } }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-5px); } 65% { transform: translateX(4px); } }

@media (max-width: 640px) {
  .hero { min-height: 13rem; padding: 1.5rem; border-radius: 18px; }
  .hero h1 { font-size: 1.8rem; }
  .calendar { grid-template-columns: 1fr; }
  .cal-head, .cal-day.blank, .cal-day.free { display: none; }
  .cal-day { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; padding: .6rem; }
  .cal-date { display: flex; flex-basis: 100%; align-items: center; gap: .35rem; }
  .cal-weekday { display: inline; font-size: .9rem; color: var(--texto-suave); }
  .cal-task { flex-basis: 100%; padding: .3rem .55rem; white-space: normal; overflow-wrap: anywhere; }
  .cal-title { min-width: 0; font-size: 1.25rem; }
  .work-head { flex-wrap: wrap; }
  .work-head .name { flex-basis: calc(100% - 2rem); }
  .task-add { flex-wrap: wrap; }
  .task-add input:first-child { flex-basis: 100%; }
  .topbar { padding: .6rem 16px; }
  .account { width: 100%; margin-left: 0; }
  .bell-wrap { position: static; order: 2; margin-left: auto; }
  .bell-panel { left: 16px; right: 16px; width: auto; }
  .page, .board-head, .board { padding-left: 16px; padding-right: 16px; }
  .board { scroll-snap-type: x proximity; }
  .column { scroll-snap-align: center; max-height: none; }
  .month-list { grid-template-columns: repeat(2, 1fr); }
  .team thead { display: none; }
  .team, .team tbody, .team tr, .team td { display: block; }
  .team td { border: 0; padding: .2rem .9rem; }
  .team tr { padding: .5rem 0; border-bottom: 1px solid var(--turfa); }
  .login-strata { height: 45vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop { animation: none !important; transition: none !important; }
}