/* Dia a dia — tarefas, automações, notificações e créditos de SMS (Fase B do polimento, 2026-10-20).
   Carregado pelo layouts/base.php depois do app.css. Mobile-first; só tokens; nada de JS para layout. */

/* ==========================================================================
   Tarefas (/app/tarefas)
   ========================================================================== */
.task-quick { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); }
.task-quick__icon { color: var(--ink-4); flex: none; display: inline-flex; }
.task-quick .input { flex: 1; min-width: 0; border-color: transparent; background: transparent; padding-inline: 4px; min-height: 44px; }
.task-quick .input:hover { background: var(--surface-hover); }
.task-quick .input:focus { background: var(--surface); border-color: var(--primary); }
.task-quick__date { width: auto; max-width: 150px; min-height: 40px; padding-block: 6px; font-size: var(--fs-sm); flex: none; }
.task-quick__more { flex: none; }
@media (max-width: 639px) { .task-quick { flex-wrap: wrap; padding: var(--sp-3); } .task-quick__icon { display: none; } .task-quick .input { flex-basis: 100%; padding-inline: 0; } .task-quick .input:focus { padding-inline: 10px; } .task-quick .task-quick__date { flex: 1 1 140px; flex-basis: 140px; width: auto; max-width: none; padding-inline: 10px; } .task-quick > .btn--primary { flex: none; } }

.task-group { margin-bottom: var(--sp-4); }
.task-group .card__header { padding: var(--sp-3) var(--sp-4) 0; margin-bottom: var(--sp-1); }
.task-group__title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm) !important; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--track-caps); }
.task-group__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); flex: none; }
.task-group--overdue .task-group__title { color: var(--danger); }
.task-group--overdue .task-group__title::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.task-group--today .task-group__title { color: var(--primary-ink); }
.task-group--today .task-group__title::before { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.task-group--upcoming .task-group__title::before { background: var(--info); }

.task-row { align-items: flex-start; padding-block: var(--sp-3); transition: background var(--dur-1) var(--ease), opacity var(--dur-2) var(--ease); }
.task-row__check { flex: none; display: inline-flex; margin-top: 1px; }
.task-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; transition: border-color var(--dur-1) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease-out); }
.task-check svg { width: 15px; height: 15px; transform: scale(.4); opacity: 0; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease); }
.task-check:hover { border-color: var(--primary); color: var(--primary); }
.task-check:hover svg { transform: scale(1); opacity: .6; }
.task-check:active { transform: scale(.9); }
.task-check:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.task-check--done, .task-row.is-done .task-check { background: var(--success); border-color: var(--success); color: #fff; }
.task-check--done svg, .task-row.is-done .task-check svg { transform: scale(1); opacity: 1; }
.task-row.is-done .task-check { animation: task-pop var(--dur-3) var(--ease-out); }
@keyframes task-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
.task-row.is-done .list-row__title, .task-row--done .list-row__title { text-decoration: line-through; color: var(--ink-3); text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); }
.task-row.is-done { opacity: .55; }
.task-row--done .list-row__meta { color: var(--ink-3); }
.task-row .list-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.task-row__due { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.task-row__due svg { width: 13px; height: 13px; color: var(--ink-3); }
.task-row__due--late { color: var(--danger); font-weight: 600; }
.task-row__due--late svg { color: var(--danger); }
.task-row__due--today { color: var(--primary-ink); font-weight: 600; }
.task-row__notes { white-space: normal; color: var(--ink-3); font-size: var(--fs-xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-row__actions { display: inline-flex; gap: 4px; align-items: center; margin-top: -4px; }
.task-row__actions .btn--whatsapp.btn--sm { padding-inline: 10px; }
@media (max-width: 639px) { .task-row__actions .btn--whatsapp span { display: none; } }
.task-row__src { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-3); }
.task-row__src svg { width: 12px; height: 12px; }
.task-done-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; }

/* ==========================================================================
   Automações (/app/automacoes)
   ========================================================================== */
.auto-row .icon-box { transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.auto-row.is-paused .icon-box { background: var(--neutral-soft); color: var(--ink-3); }
.auto-row.is-paused .list-row__title { color: var(--ink-2); }
.auto-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; min-width: 0; }
.auto-flow__node { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--border-subtle); }
.auto-flow__node--trigger { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; font-weight: 600; }
.auto-flow__node svg { width: 12px; height: 12px; flex: none; }
.auto-flow__arrow { color: var(--ink-4); display: inline-flex; flex: none; }
.auto-flow__arrow svg { width: 14px; height: 14px; }
.auto-flow__more { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.auto-row__stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
.auto-row__stats span { display: inline-flex; align-items: center; gap: 4px; }
.auto-row__stats svg { width: 12px; height: 12px; }
.auto-row__stats b { font-weight: 600; color: var(--ink-2); }

/* Receitas (cartões) */
.recipes { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recipe { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; }
.recipe--suggested { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: linear-gradient(160deg, var(--primary-soft) 0%, var(--surface) 42%); }
.recipe__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.recipe__head .icon-box { flex: none; }
.recipe__title { font-size: var(--fs-md) !important; margin: 0 0 2px !important; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.3; }
.recipe__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.recipe__flow { display: grid; gap: 6px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-xs); }
.recipe--suggested .recipe__flow { background: color-mix(in srgb, var(--surface) 70%, var(--primary-soft)); }
.recipe__step { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: start; }
.recipe__step b { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); padding-top: 2px; }
.recipe__step span { color: var(--ink); }
.recipe__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.recipe__actions form { display: contents; }
.recipe-list .list-row { min-height: 56px; }
.recipe-list .list-row .list-row__end form { display: contents; }

/* Ficha: fluxo visual gatilho → condições → ações */
.flow { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.flow__step { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.flow__step + .flow__step::before { content: ""; position: absolute; left: 29px; top: calc(-1 * var(--sp-2) - 1px); height: var(--sp-2); border-left: 2px dashed var(--border-strong); }
.flow__step--trigger { background: var(--primary-soft); border-color: transparent; }
.flow__step--cond { background: var(--surface-2); border-style: dashed; }
.flow__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); flex: none; }
.flow__icon svg { width: 18px; height: 18px; }
.flow__step--trigger .flow__icon { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.flow__step--action .flow__icon { background: var(--info-soft); color: var(--info); border-color: transparent; }
.flow__step--cond .flow__icon { background: var(--surface); color: var(--ink-3); }
.flow__body { min-width: 0; }
.flow__label { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); font-weight: 600; }
.flow__step--trigger .flow__label { color: var(--primary-ink); }
.flow__title { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--ink); line-height: var(--lh-snug); }
.flow__text { display: block; font-size: var(--fs-xs); color: var(--ink-2); white-space: pre-wrap; margin-top: 4px; padding: 6px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border-subtle); }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); align-items: stretch; }
  .flow__step { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-4); }
  .flow__step + .flow__step::before { top: 50%; left: calc(-1 * var(--sp-6)); width: var(--sp-6); height: 0; border-left: 0; border-top: 2px dashed var(--border-strong); transform: translateY(-50%); }
  .flow__step + .flow__step::after { content: ""; position: absolute; top: 50%; left: -10px; width: 7px; height: 7px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: translateY(-50%) rotate(45deg); }
}
.auto-hero { position: relative; }
.auto-hero__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.auto-hero h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-1); }
.auto-hero__desc { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }
.auto-stats { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.auto-stats .stat { padding: var(--sp-3) var(--sp-4); box-shadow: none; background: var(--surface-2); border-color: var(--border-subtle); }
.auto-stats .stat__value { font-size: var(--fs-xl); }
.auto-stats .stat__value small { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; }
.auto-stats .stat__value--text { font-size: var(--fs-md); padding-top: 4px; }
@media (max-width: 479px) { .auto-stats { grid-template-columns: 1fr 1fr; } .auto-stats .stat:last-child { grid-column: span 2; } }
.auto-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.auto-actions form { display: contents; }
.auto-actions .ml-auto { margin-left: auto; }
.run-row { align-items: flex-start; }
.run-row__results { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.run-row__results .badge { font-weight: 500; }
.run-row__results .badge b { font-weight: 600; }
.run-row__time { font-variant-numeric: tabular-nums; }
.run-row__error { color: var(--danger); }
.runs-empty { padding: var(--sp-6) var(--sp-5); color: var(--ink-2); font-size: var(--fs-sm); text-align: center; }

/* Formulário: passos numerados e linhas de ação */
.step-title { display: inline-flex; align-items: center; gap: 10px; }
.step-title__num { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.action-row { background: var(--surface-2); border: 1px dashed var(--border-strong); box-shadow: none; padding: var(--sp-4); border-radius: var(--r-md); }
.action-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.action-row__title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.action-row__num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-strong); font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; }
.action-row__tools { display: inline-flex; gap: 2px; }
.action-row .field:last-child { margin-bottom: 0; }
.action-add { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-4); }
.action-add .select { flex: 1 1 220px; max-width: 320px; }
.vars-hint code { font-size: var(--fs-2xs); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border-subtle); }
.window-days { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ==========================================================================
   Notificações (/app/notificacoes)
   ========================================================================== */
.notif-group { margin-bottom: var(--sp-4); }
.notif-group__day { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-1); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); }
.notif-group__day .badge { margin-left: auto; text-transform: none; letter-spacing: 0; }
.notif-row { position: relative; min-height: 64px; align-items: flex-start; padding-block: var(--sp-3); }
.notif-row .icon-box { margin-top: 1px; }
.notif-row .list-row__title { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.notif-row .list-row__meta { color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-row--unread { background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)); }
.notif-row--unread::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.notif-row--unread .list-row__title { font-weight: 700; }
.notif-row--unread .list-row__meta { color: var(--ink-2); }
.notif-row__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; display: inline-block; box-shadow: 0 0 0 3px var(--primary-soft); }
.notif-row__time { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; padding-top: 2px; font-variant-numeric: tabular-nums; }
.notif-row:hover .notif-row__time { color: var(--ink-2); }
@media (max-width: 639px) { .notif-row__time { font-size: var(--fs-2xs); } }

/* ==========================================================================
   Créditos de SMS (/app/sms)
   ========================================================================== */
.sms-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sms-hero .sms-balance { grid-column: span 2; }
@media (min-width: 760px) { .sms-hero .sms-balance { grid-column: auto; } }
@media (min-width: 760px) { .sms-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); } }
.sms-balance { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: var(--sp-5) var(--sp-6); min-height: 128px; }
.sms-balance .stat__value { font-size: var(--fs-3xl); display: inline-flex; align-items: baseline; gap: 8px; }
.sms-balance .stat__value small { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; opacity: .85; }
.sms-balance__icon { position: absolute; right: -14px; bottom: -22px; width: 120px; height: 120px; opacity: .14; pointer-events: none; }
.sms-balance__icon svg { width: 100%; height: 100%; }
.sms-balance--low { background: linear-gradient(135deg, var(--warning-soft) 0%, var(--surface) 70%); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.sms-balance--low .stat__value { color: var(--warning-strong); }
.sms-balance--low .stat__delta { color: var(--warning-strong); font-weight: 600; }
.sms-balance--low .sms-balance__icon { color: var(--warning); }
.sms-hero .stat--compact { justify-content: center; }
.sms-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
@media (min-width: 480px) { .sms-packs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sms-pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); font: inherit; cursor: pointer; color: var(--ink); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.sms-pack:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.sms-pack:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sms-pack__value { font-weight: 700; font-size: var(--fs-md); letter-spacing: -.01em; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.sms-pack__credits { font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sms-pack.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.sms-pack.is-active .sms-pack__credits { color: var(--primary-ink); }
.sms-pay { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sms-hint--error { color: var(--danger); }
.sms-how { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.sms-how li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-sm); color: var(--ink-2); }
.sms-how li .icon-box--sm { margin-top: -2px; }
.sms-credit--in { color: var(--success); font-weight: 600; }
.sms-credit--out { color: var(--ink-2); }
.sms-msg-row .list-row__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sms-msg-row__when { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; }
.sms-msg-row__err { color: var(--danger); }
.sms-tabs { margin-bottom: var(--sp-4); }