/* ═══════════════════════════════════════════════
   ALEX PORTA – app.css
   Estilos compartilhados pela Área do Cliente e pelos
   painéis internos (orçamentos e manutenções).
   Depende dos tokens definidos em style.css (carregar antes).
═══════════════════════════════════════════════ */

.app-header {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: var(--s4) 0;
}
.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.app-logo img { height: 64px; transform: scale(1.15); transform-origin: left center; transition: transform 0.3s ease; }
.app-header-nav { display: flex; align-items: center; gap: var(--s5); font-size: 0.9rem; }
.app-header-nav a { color: var(--ink-40); font-weight: 600; }
.app-header-nav a:hover { color: var(--teal-dark); }

.app-main { min-height: calc(100vh - 200px); padding: var(--s10) 0 var(--s16); background: var(--bg-gray); }

.app-card {
  background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--s8); max-width: 480px; margin: 0 auto;
}
.app-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; color: var(--ink); margin-bottom: var(--s2); }
.app-card p.app-card-sub { color: var(--ink-40); margin-bottom: var(--s6); line-height: 1.6; }

.app-field { margin-bottom: var(--s5); }
.app-field label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-60); margin-bottom: var(--s2); }
.app-field input, .app-field select, .app-field textarea {
  width: 100%; padding: var(--s3) var(--s4); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); font-size: 1rem; color: var(--ink); background: var(--bg);
  transition: border-color var(--ease);
}
.app-field input:focus, .app-field select:focus, .app-field textarea:focus { outline: none; border-color: var(--teal); }
.app-field.error input { border-color: #DC2626; }

.app-alert {
  border-radius: var(--r-sm); padding: var(--s4); font-size: 0.9rem; margin-bottom: var(--s5);
}
.app-alert--warn { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.app-alert--error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.app-alert--info { background: var(--teal-light); color: var(--teal-dark); border: 1px solid var(--teal); }

.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; padding: var(--s4); border-radius: var(--r-sm); font-weight: 700;
  background: var(--teal); color: #fff; transition: background var(--ease);
}
.app-btn:hover { background: var(--teal-dark); }

/* ── Badges de status ── */
.status-badge {
  display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.8rem; font-weight: 700;
  padding: var(--s1) var(--s3); border-radius: var(--r-full); color: #fff; white-space: nowrap;
}

/* ── Linha do tempo (área do cliente) ── */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative; padding: 0 0 var(--s6) var(--s8); border-left: 2px solid var(--border);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--teal); border: 2px solid var(--bg);
}
.timeline-status { font-weight: 700; color: var(--ink); }
.timeline-date { font-size: 0.8rem; color: var(--ink-20); margin-bottom: var(--s1); display: block; }
.timeline-note { font-size: 0.9rem; color: var(--ink-40); margin-top: var(--s1); }

/* ── Ficha de acompanhamento (cliente) ── */
.tracking-card {
  background: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: var(--s8); max-width: 720px; margin: 0 auto var(--s8);
}
.tracking-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.tracking-head h2 { font-size: 1.3rem; color: var(--ink); }
.tracking-head span { color: var(--ink-40); font-size: 0.9rem; }
.tracking-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin-bottom: var(--s8); }
.tracking-grid dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-20); }
.tracking-grid dd { font-size: 0.95rem; color: var(--ink); margin-bottom: var(--s3); }

/* ── Login demonstrativo (painéis internos) ── */
.demo-warning {
  background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; border-radius: var(--r-sm);
  padding: var(--s3) var(--s4); font-size: 0.8rem; text-align: center; margin-bottom: var(--s6);
}

/* ── Dashboard interno ── */
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4); margin-bottom: var(--s8); }
.dash-card {
  background: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--s5);
  border-left: 4px solid var(--teal);
}
.dash-card strong { display: block; font-size: 1.8rem; color: var(--ink); }
.dash-card span { font-size: 0.8rem; color: var(--ink-40); }

/* ── Filtros ── */
.filters-bar { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.filters-bar input, .filters-bar select {
  padding: var(--s3) var(--s4); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-size: 0.9rem; background: var(--bg);
}

/* ── Tabela ── */
.data-table-wrap { background: var(--bg); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 900px; }
.data-table th, .data-table td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { background: var(--bg-gray); color: var(--ink-60); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.data-table tbody tr:hover { background: var(--bg-gray); }
.data-table .row-btn { color: var(--teal-dark); font-weight: 700; cursor: pointer; background: none; border: none; }

/* ── Modal de detalhe ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: flex;
  align-items: flex-start; justify-content: center; padding: var(--s8) var(--s4); overflow-y: auto; z-index: 2000;
}
.modal-overlay[hidden] { display: none; }
.modal-box { background: var(--bg); border-radius: var(--r-lg); padding: var(--s8); max-width: 720px; width: 100%; box-shadow: var(--shadow-xl); }
.modal-box-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s6); }
.modal-close { font-size: 1.4rem; color: var(--ink-40); background: none; border: none; cursor: pointer; }
.modal-section { margin-bottom: var(--s6); }
.modal-section h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-20); margin-bottom: var(--s3); }
.modal-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.modal-actions button, .modal-actions a {
  font-size: 0.85rem; font-weight: 700; padding: var(--s2) var(--s4); border-radius: var(--r-sm);
  background: var(--bg-gray); color: var(--ink-60); border: 1px solid var(--border); cursor: pointer;
}
.modal-actions button:hover, .modal-actions a:hover { background: var(--border); }

@media (max-width: 640px) {
  .tracking-grid, .modal-field-grid { grid-template-columns: 1fr; }
  .app-card, .modal-box { padding: var(--s6); }
}