/* Fase 6 — Onboarding por profissão, tour guiado e LGPD (Meus dados).
 * Carregado pelo layouts/base.php junto com os outros módulos. */

/* ---- Meus dados ---- */
.lgpd-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 900px) { .lgpd-grid { grid-template-columns: 2fr 1fr; } }
.lgpd-card { min-width: 0; }
.lgpd-card .card__header h3 { display: inline-flex; align-items: center; gap: 6px; }
.lgpd-card--danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.lgpd-card--danger .card__header h3 { color: var(--danger); }
.lgpd-explain ul { padding-left: 18px; margin: 4px 0 8px; }
.lgpd-explain li { margin-bottom: 4px; }
.lgpd-table td, .lgpd-table th { vertical-align: middle; }
.lgpd-progress__bar { transition: width .6s ease; }
.lgpd-delete-form .form-actions { margin-top: var(--sp-3); }
@media (max-width: 640px) {
  .lgpd-table thead { display: none; }
  .lgpd-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .lgpd-table td { border: 0; padding: 0; }
  .lgpd-table td:last-child { grid-column: 1 / -1; text-align: left !important; margin-top: 4px; }
}

/* ---- Checklist ampliado ---- */
.checklist-row.is-done .list-row__title { text-decoration: line-through; color: var(--ink-3); }
.checklist-row .avatar--done { background: var(--success-soft); color: var(--success); }
.sample-banner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--warning-soft); font-size: var(--fs-sm); }
.sample-banner form { margin-left: auto; }

/* ---- Faixa de exclusão agendada ---- */
.deletion-banner { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 10px var(--sp-4); background: var(--danger-soft); color: var(--danger); border-bottom: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); font-size: var(--fs-sm); }
.deletion-banner strong { font-weight: 700; }
.deletion-banner form { margin-left: auto; }
.deletion-banner .btn { white-space: nowrap; }

/* ---- Onboarding: passo dos exemplos ---- */
.onb-examples { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2, var(--surface)); margin: var(--sp-4) 0; cursor: pointer; }
.onb-examples input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.onb-examples strong { display: block; margin-bottom: 2px; }
.onb-examples small { color: var(--ink-2); display: block; }
.onb-templates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---- Tour guiado ---- */
.tour { position: fixed; inset: 0; z-index: 1200; }
.tour__overlay { position: absolute; inset: 0; }
.tour__spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(16, 24, 40, .62), 0 0 0 3px var(--primary); pointer-events: none; transition: top .25s, left .25s, width .25s, height .25s; z-index: 1; }
.tour__spot[hidden] { display: none; }
.tour__card--free ~ .tour__overlay, .tour__spot[hidden] + .tour__card { box-shadow: var(--shadow-md); }
.tour:has(.tour__spot[hidden]) .tour__overlay { background: rgba(16, 24, 40, .62); }
.tour__card { position: fixed; z-index: 2; width: min(360px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,.25)); animation: tour-in .2s ease-out; }
.tour__card--free { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour__card::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); left: 28px; }
.tour__card--bottom::before { top: -7px; }
.tour__card--top::before { bottom: -7px; }
.tour__card--free::before { display: none; }
.tour__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tour__step { font-size: var(--fs-xs); font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.tour__title { margin: 0 0 4px; font-size: var(--fs-lg); }
.tour__text { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); }
.tour__actions { display: flex; align-items: center; gap: 6px; }
body.tour-open { overflow: hidden; }
@keyframes tour-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour__card--free { animation: none; }
@media (prefers-reduced-motion: reduce) { .tour__spot, .tour__card { transition: none; animation: none; } }