/* Minha Vida Organizada — tela de início: blocos, widget de viagem e modo de personalização.
   Depende de tokens.css e shell.css. Só valores da escala e variáveis, nenhuma cor solta. */

[hidden] { display: none !important; }

/* ---------- Estrutura: o 1º bloco em largura total; depois a tela divide em principal + lateral ---------- */
.page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.edit-hint { font-size: 12.5px; color: var(--text-secondary); margin: calc(var(--space-2) * -1) 0 var(--space-4); max-width: 820px; }

.home-top { margin-bottom: var(--space-8); }
.home-top:empty { margin: 0; }
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.home-main { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1100px) {
  .home-split { grid-template-columns: 1fr; }
  .home-side { flex-direction: row; flex-wrap: wrap; }
  .home-side .side-card { flex: 1 1 260px; }
}

.sec-block, .mod-tile, .hl-card, .side-card { position: relative; }   /* as ferramentas de edição se ancoram no próprio bloco ou card */
.home .hl-row { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 0; }
.home .sec-lbl { margin-bottom: var(--space-4); }

/* ---------- Widget da próxima viagem ---------- */
.travel-card { position: relative; display: flex; align-items: center; height: 110px; padding: 0 var(--space-5); border: none; background: linear-gradient(120deg, var(--travel-a), var(--travel-b)); color: var(--on-photo); overflow: hidden; }
.travel-card::after { content: ""; position: absolute; right: calc(var(--space-10) * -1); top: calc(var(--space-6) * -1); width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 0 0 28px rgba(255,255,255,.04), 0 0 0 56px rgba(255,255,255,.03); pointer-events: none; }
.travel-badge { width: 38px; height: 38px; border-radius: var(--radius-sm); background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; margin-right: var(--space-4); flex-shrink: 0; }
.travel-badge svg { width: 18px; height: 18px; stroke-width: 2; }
.travel-info { min-width: 0; }
.travel-info .tl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,.75); }
.travel-info .tr { font-size: 18px; font-weight: 700; margin-top: var(--space-1); }
.travel-info .td { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); margin-top: var(--space-1); }
.travel-go { position: relative; z-index: 1; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.travel-go svg { width: 16px; height: 16px; stroke-width: 2; }

/* ---------- Modo de edição: interruptor, alça, tracejado ---------- */
.blk-tools { display: none; position: absolute; top: var(--space-2); right: var(--space-2); align-items: center; gap: var(--space-2); z-index: 2; }
.is-editing .blk-tools { display: flex; }
.sec-block > .blk-tools { top: 0; right: 0; }
.drag-handle { display: flex; width: 24px; height: 24px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-secondary); align-items: center; justify-content: center; cursor: grab; border: none; padding: 0; transition: background-color 150ms, color 150ms, box-shadow 150ms; }
.drag-handle:hover { background: var(--brand-light); color: var(--brand); }
.drag-handle.is-block { width: auto; height: 28px; padding: 0 var(--space-3); gap: var(--space-1); font: inherit; font-size: 12.5px; font-weight: 600; }
.blk-switch { position: relative; width: 32px; height: 18px; border-radius: var(--radius-pill); border: none; padding: 0; background: var(--border-strong); cursor: pointer; flex-shrink: 0; transition: background-color 150ms, box-shadow 150ms; }
.blk-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform 150ms; }
.blk-switch[aria-checked="true"] { background: var(--brand); }
.blk-switch[aria-checked="true"]::after { transform: translateX(14px); }

.is-editing [data-key] { outline: 2px dashed var(--border-strong); outline-offset: var(--space-1); }
.is-editing .sec-block { outline: 2px dashed var(--text-faint); outline-offset: var(--space-3); }
.is-editing .hl-card, .is-editing .mod-tile, .is-editing .side-card { padding-top: calc(var(--space-10) + var(--space-2)); }   /* espaço pras ferramentas */
.is-editing .hl-arrow, .is-editing .travel-go { display: none; }
.dragging { opacity: 0.4; }

.home:not(.is-editing) .is-off { display: none; }   /* fora da edição o desligado some; em edição fica esmaecido */
.is-editing .is-off > *:not(.blk-tools) { opacity: 0.4; }
.is-editing .home-top:empty, .is-editing .home-main:empty { min-height: var(--space-10); }