/* ══════════════════════════════════════════════════════════
   Precificação — Dra. Mychelle Amaral
   Paleta terracota #9b514c (tokens copiados da Calculadora de Markup)
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --gold: #9b514c;
  --gold-light: #b87772;
  --gold-dark: #7a3f3b;
  --bg: #ffffff;
  --card-bg: rgba(155,81,76,0.04);
  --card-border: rgba(155,81,76,0.16);
  --card-border-strong: rgba(155,81,76,0.38);
  --ink: #1a1a1a;
  --text: #5a5a5a;
  --muted: #9a9a9a;
  --input-bg: rgba(155,81,76,0.05);
  --input-border: rgba(155,81,76,0.22);
  --input-focus: rgba(155,81,76,0.55);
  --green: #16a34a; --green-bg: rgba(22,163,74,0.10); --green-border: rgba(22,163,74,0.35);
  --amber: #d97706; --amber-bg: rgba(217,119,6,0.10); --amber-border: rgba(217,119,6,0.35);
  --red: #dc2626;   --red-bg: rgba(220,38,38,0.10);   --red-border: rgba(220,38,38,0.35);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --poppins: 'Poppins', -apple-system, sans-serif;
  --radius: 10px; --radius-lg: 14px; --radius-sm: 6px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-gold: 0 4px 24px rgba(155,81,76,0.18);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.bg-glow {
  position: fixed; top: -260px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,81,76,0.10), transparent 70%);
  pointer-events: none; z-index: 0;
}

/* Layout base do app */
.wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 24px 20px 80px; }
.app-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--gold); color:#fff; font-family:var(--serif); font-weight:600; font-size:19px; box-shadow:var(--shadow-gold); }
.app-header h1 { font-family:var(--serif); font-weight:600; font-size:22px; color:var(--ink); line-height:1.1; }
.app-header p { color:var(--text); font-size:12.5px; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.tab { font-family:var(--poppins); font-size:13px; font-weight:500; color:var(--text); background:transparent; border:1px solid var(--card-border); border-radius:999px; padding:8px 15px; cursor:pointer; transition:all .15s ease; }
.tab:hover { border-color:var(--card-border-strong); color:var(--gold-dark); }
.tab.active { background:var(--gold); color:#fff; border-color:var(--gold); box-shadow:var(--shadow-gold); }
.view { display:none; } .view.active { display:block; }
.card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-card); }
.card + .card { margin-top:18px; }
.card h2 { font-family:var(--serif); font-weight:600; font-size:20px; color:var(--gold-dark); margin-bottom:2px; }
.card > .sub { color:var(--text); font-size:12.5px; margin-bottom:16px; }
.field { margin-bottom:14px; }
.field-label { display:block; font-family:var(--poppins); font-size:12px; font-weight:500; color:var(--gold-dark); margin-bottom:5px; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input-wrap .affix { position:absolute; color:var(--muted); font-size:13px; pointer-events:none; } .affix.left{left:12px;} .affix.right{right:12px;}
.input, select.input { width:100%; font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--radius); padding:10px 12px; }
select.input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;                 /* espaço para a seta, longe da borda */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239b514c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;   /* a 14px da borda, não colada */
  background-size: 12px 8px;
  cursor: pointer;
}
select.input::-ms-expand { display: none; }
.input.has-left{padding-left:30px;} .input.has-right{padding-right:34px;}
.input:focus{outline:none; border-color:var(--input-focus); box-shadow:0 0 0 3px rgba(155,81,76,0.10);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
@media(max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.btn{font-family:var(--poppins); font-size:13px; font-weight:500; border-radius:var(--radius); padding:9px 16px; cursor:pointer; border:1px solid transparent; transition:all .15s ease;}
.btn-primary{background:var(--gold); color:#fff;} .btn-primary:hover{background:var(--gold-dark);}
.btn-ghost{background:transparent; color:var(--gold-dark); border-color:var(--card-border-strong);} .btn-ghost:hover{background:rgba(155,81,76,0.06);}
.btn-danger{background:transparent; color:var(--red); border-color:var(--red-border);} .btn-danger:hover{background:var(--red-bg);}
.list{width:100%; border-collapse:collapse; margin-top:6px;}
.list th{font-family:var(--poppins); font-size:11px; font-weight:600; color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--card-border);}
.list td{font-size:13px; color:var(--ink); padding:9px 10px; border-bottom:1px solid var(--card-border);}
.list .row-actions{display:flex; gap:6px; justify-content:flex-end;}
.empty{color:var(--muted); font-size:13px; padding:18px 4px; text-align:center;}
.result{margin-top:18px; padding:20px; border-radius:var(--radius-lg); background:linear-gradient(135deg,rgba(155,81,76,0.08),rgba(155,81,76,0.03)); border:1px solid var(--card-border-strong);}
.result.error{background:var(--red-bg); border-color:var(--red-border);}
.result-row{display:flex; justify-content:space-between; align-items:baseline; padding:6px 0;}
.result-row + .result-row{border-top:1px dashed var(--card-border);}
.result-row .k{font-family:var(--poppins); font-size:12.5px; color:var(--text);}
.result-row .v{font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink);}
.result-row.hero .v{font-size:28px; color:var(--gold-dark);}
.result-row.sub .k{padding-left:14px; color:var(--muted);} .result-row.sub .v{font-size:15px; color:var(--text);}
.result .msg{color:var(--red); font-weight:600; font-family:var(--poppins); font-size:14px;}
.badge{display:inline-block; font-family:var(--poppins); font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(155,81,76,0.08); color:var(--gold-dark);}

/* ── Modal de login + toast (Fase 2) ── */
.modal[hidden]{display:none;}
.modal{position:fixed; inset:0; z-index:50; display:grid; place-items:center;}
.modal-backdrop{position:absolute; inset:0; background:rgba(26,26,26,0.45);}
.modal-card{position:relative; background:#fff; border:1px solid var(--card-border-strong); border-radius:var(--radius-lg); padding:26px; width:min(92vw,380px); box-shadow:var(--shadow-gold);}
.modal-card h3{font-family:var(--serif); font-weight:600; font-size:22px; color:var(--gold-dark); margin-bottom:4px;}
.modal-card > p{color:var(--text); font-size:13px; margin-bottom:16px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.field-hint{font-size:12px; margin-top:6px;}
.toast-wrap{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{background:#1a1a1a; color:#fff; font-family:var(--sans); font-size:13px; padding:10px 16px; border-radius:999px; box-shadow:0 4px 20px rgba(0,0,0,0.18);}
.toast.error{background:var(--red);}
.toast.info{background:var(--gold-dark);}

/* Botão de ícone (engrenagem etc.) */
.btn-icon{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; border:1px solid var(--card-border); background:transparent; color:var(--gold-dark); cursor:pointer; transition:all .15s ease; flex:none; padding:0; }
.btn-icon:hover{ border-color:var(--card-border-strong); background:rgba(155,81,76,0.06); }