/* ============================================================
   GPS IMOBILIÁRIO — components/minha-area.css
   Minha Área — drawer (mobile) + full-page (desktop ≥768px)
   Responsive automático, sem toggle manual.
   Extraído de components.css (refactor v0.10.9)
   ============================================================ */

/* ─── BOTÃO TOPBAR ─── */
.btn-minha-area { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--cream); border: 1px solid var(--cream-border); border-radius: var(--r); cursor: pointer; color: var(--ink-muted); transition: all .2s; }
.btn-minha-area:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }

/* ─── OVERLAY BASE ─── */
.minha-area-overlay { display: none; position: fixed; inset: 0; z-index: 200; }
.minha-area-overlay.open { display: flex; }
.minha-area-backdrop { flex: 1; background: rgba(26,24,20,0.3); backdrop-filter: blur(1px); cursor: pointer; }
.minha-area-drawer { width: 100%; max-width: 420px; background: white; height: 100vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideInRight .25s ease; display: flex; flex-direction: column; }

/* ─── HEADER ─── */
.minha-area-header { padding: 20px 20px 16px; border-bottom: 1px solid var(--cream-border); display: flex; align-items: center; gap: 14px; background: white; position: sticky; top: 0; z-index: 5; }
.minha-area-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--cream-dark); border: 1px solid var(--cream-border); display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--font-2xl); font-weight: 600; color: var(--ink-soft); flex-shrink: 0; overflow: hidden; position: relative; cursor: pointer; }
.minha-area-avatar img { width: 100%; height: 100%; object-fit: cover; }
.minha-area-info { flex: 1; }
.minha-area-nome { font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--font-xl); font-weight: 600; color: var(--ink); }
.minha-area-role { font-size: var(--font-sm); color: var(--ink-muted); margin-top: 2px; }
.minha-area-body { padding: 20px; flex: 1; }

/* ─── BREADCRUMB (só full-page desktop) ─── */
.ma-breadcrumb { display: none; align-items: center; gap: 8px; padding: 12px 20px; font-size: var(--font-sm); color: var(--ink-muted); border-bottom: 1px solid var(--cream-border); background: white; }
.ma-bread-back { background: none; border: none; color: var(--accent); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: var(--font-sm); padding: 0; }
.ma-bread-back:hover { text-decoration: underline; }
.ma-bread-sep { color: var(--ink-muted); }
.ma-bread-current { color: var(--ink); font-weight: 500; }

/* ─── SECÇÕES ─── */
.ma-section { background: var(--cream); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.ma-section-title { font-size: var(--font-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; }
.ma-form-group { margin-bottom: 14px; }
.ma-form-group label { display: block; font-size: var(--font-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.ma-form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--cream-border); border-radius: var(--r); background: white; font-family: 'DM Sans', sans-serif; font-size: var(--font-base); color: var(--ink); outline: none; transition: border-color .2s; }
.ma-form-group input:focus { border-color: var(--accent); }
.ma-form-group input:disabled { background: var(--cream-dark); color: var(--ink-muted); cursor: not-allowed; }
.btn-ma-save { width: 100%; padding: 11px; background: var(--ink); color: var(--cream); border: none; border-radius: var(--r); font-family: 'DM Sans', sans-serif; font-size: var(--font-base); font-weight: 500; cursor: pointer; transition: background .2s; margin-top: 4px; }
.btn-ma-save:hover { background: var(--accent); color: white; }
.foto-preview-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foto-preview { width: 52px; height: 52px; border-radius: 50%; background: var(--cream-dark); border: 1px solid var(--cream-border); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--font-xl); font-weight: 600; color: var(--ink-soft); }
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ─── TABS ─── */
.ma-tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--cream-border); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; background: white; position: sticky; top: 0; z-index: 4; }
.ma-tabs::-webkit-scrollbar { height: 4px; }
.ma-tabs::-webkit-scrollbar-thumb { background: var(--cream-border); border-radius: 2px; }
.ma-tab-btn { flex-shrink: 0; scroll-snap-align: start; background: none; border: none; padding: 12px 14px; font-family: 'DM Sans', sans-serif; font-size: var(--font-sm); font-weight: 500; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s; white-space: nowrap; }
.ma-tab-btn:hover { color: var(--ink); }
.ma-tab-btn.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.ma-tab-btn.ma-tab-admin { color: var(--red-soft); }
.ma-tab-btn.ma-tab-admin.is-active { color: var(--red-soft); border-bottom-color: var(--red-soft); }

.ma-tab-panel { display: none; }
.ma-tab-panel.is-active { display: block; animation: fadeIn .15s ease; }

.ma-tab-placeholder { font-size: var(--font-sm); color: var(--ink-muted); margin-bottom: 14px; line-height: 1.5; }
.ma-hint { font-size: var(--font-xs); color: var(--ink-muted); font-weight: 400; margin-left: 4px; }
.ma-hint em { font-style: normal; color: var(--accent); }
.ma-coming-soon { display: inline-block; margin-top: 8px; padding: 6px 10px; background: var(--cream-dark); color: var(--ink-muted); border-radius: var(--r); font-size: var(--font-xs); letter-spacing: 0.04em; }
.ma-coming-soon-inline { font-size: var(--font-xs); color: var(--ink-muted); background: var(--cream-dark); padding: 2px 8px; border-radius: var(--r); }

.ma-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.ma-kpi-card { background: white; border: 1px solid var(--cream-border); border-radius: var(--r); padding: 12px 10px; text-align: center; }
.ma-kpi-label { font-size: var(--font-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.ma-kpi-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--font-lg); font-weight: 600; color: var(--ink); }

.ma-doc-list { display: flex; flex-direction: column; gap: 2px; }
.ma-doc-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: white; border: 1px solid var(--cream-border); border-radius: var(--r); font-size: var(--font-sm); color: var(--ink); text-decoration: none; transition: all .15s; }
.ma-doc-link:hover:not(.ma-doc-disabled) { border-color: var(--accent); color: var(--accent); }
.ma-doc-link.ma-doc-disabled { cursor: not-allowed; color: var(--ink-muted); }
.ma-doc-arrow { color: var(--accent); }

.ma-version-box { background: white; border: 1px solid var(--cream-border); border-radius: var(--r); padding: 12px 14px; font-size: var(--font-sm); }
.ma-version-box strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: var(--font-base); color: var(--ink); }
.ma-version-date { font-size: var(--font-xs); color: var(--ink-muted); margin-top: 2px; }

.ma-notif-loading { text-align: center; padding: 30px 0; color: var(--ink-muted); font-size: var(--font-sm); }

/* ─── NOTIFICAÇÕES (grupos + switches) ─── */
.ma-notif-group { background: white; border: 1px solid var(--cream-border); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; }
.ma-notif-group-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--cream); border-bottom: 1px solid var(--cream-border); cursor: pointer; }
.ma-notif-group-title { font-weight: 500; font-size: var(--font-sm); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ma-notif-group-actions { display: flex; gap: 6px; }
.ma-notif-group-actions button { background: none; border: none; font-size: var(--font-xs); color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: var(--r); }
.ma-notif-group-actions button:hover { background: var(--accent-bg); }
.ma-notif-tipos { display: flex; flex-direction: column; }
.ma-notif-tipo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--cream-border); }
.ma-notif-tipo:first-child { border-top: none; }
.ma-notif-tipo.ma-notif-readonly { background: var(--cream); }
.ma-notif-tipo-info { flex: 1; min-width: 0; }
.ma-notif-tipo-nome { font-size: var(--font-sm); color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ma-notif-tipo-desc { font-size: var(--font-xs); color: var(--ink-muted); margin-top: 2px; line-height: 1.4; }
.ma-notif-badge-lock { display: inline-block; padding: 1px 6px; background: var(--accent-bg); color: var(--accent); border-radius: var(--r); font-size: var(--font-xs); font-weight: 400; letter-spacing: 0.04em; }
.ma-notif-badge-urgente { display: inline-block; padding: 1px 6px; background: var(--red-bg); color: var(--red-soft); border-radius: var(--r); font-size: var(--font-xs); font-weight: 500; letter-spacing: 0.04em; }
.ma-notif-tipo-controls { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.ma-notif-channel { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-xs); color: var(--ink-muted); cursor: pointer; user-select: none; }
.ma-notif-channel input { margin: 0; cursor: pointer; }
.ma-notif-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.ma-notif-switch input { opacity: 0; width: 0; height: 0; }
.ma-notif-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--cream-dark); border-radius: 20px; transition: .2s; }
.ma-notif-switch-slider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s; }
.ma-notif-switch input:checked + .ma-notif-switch-slider { background: var(--accent); }
.ma-notif-switch input:checked + .ma-notif-switch-slider::before { transform: translateX(16px); }
.ma-notif-switch input:disabled + .ma-notif-switch-slider { opacity: 0.5; cursor: not-allowed; }

/* ─── MOBILE <768px: DRAWER (como antes) ─── */
@media (max-width: 767px) {
  .minha-area-drawer { max-width: 100%; width: 100%; }
}

@media (max-width: 480px) {
  .ma-tabs { padding: 0 14px; }
  .ma-tab-btn { padding: 10px 12px; font-size: var(--font-xs); }
  .ma-kpi-grid { grid-template-columns: 1fr 1fr; }
  .ma-notif-tipo { flex-direction: column; align-items: stretch; gap: 8px; }
  .ma-notif-tipo-controls { justify-content: flex-end; }
}

/* ─── DESKTOP ≥769px: FULL-PAGE ABAIXO DA TOPBAR + À DIREITA DA SIDEBAR ─── */
@media (min-width: 769px) {
  /* Sidebar é 180px em 769-1024px e 220px em ≥1025px (ver layout.css) */
  .minha-area-overlay { inset: 56px 0 0 180px; }
  .minha-area-overlay.open { display: block; background: var(--cream); }
  .minha-area-backdrop { display: none; }
  .minha-area-drawer {
    max-width: 100%;
    width: 100%;
    height: calc(100dvh - 56px);
    box-shadow: none;
    animation: fadeIn .2s ease;
    background: var(--cream);
  }
  .minha-area-header,
  .ma-breadcrumb,
  .ma-tabs,
  .minha-area-body {
    max-width: 1024px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .minha-area-header { background: var(--cream); border-bottom: none; padding: 24px 32px 16px; }
  .ma-breadcrumb { display: flex; padding: 0 32px 12px; background: var(--cream); border-bottom: 1px solid var(--cream-border); }
  .ma-tabs { padding: 0 32px; background: var(--cream); top: 0; }
  .minha-area-body { padding: 28px 32px 40px; }
  .ma-section { background: white; border: 1px solid var(--cream-border); }
}

@media (min-width: 1025px) {
  .minha-area-overlay { inset: 56px 0 0 220px; }
}