/* =======================================================
   CSS MOBILE-FIRST (assets/app.css)
   — Optimizado para telemóvel
   — Mantém nomes de classes existentes
   Breakpoints: sm=640px, md=768px, lg=1024px
======================================================= */

:root{
  --bg:#f6f8fb; --text:#0f172a; --muted:#667085;
  --card:#ffffff; --border:#e5e7eb; --primary:#1e90ff; --accent:#22c55e;
  --warn:#b45309;
}
/* Esconder preço nas cards do revestimento */
#linerCards .opt-card .opt-body .opt-sub{
  display: none !important;
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:16px; /* tamanho confortável mobile */
  line-height:1.4;
}

.container{
  max-width:1200px;
  margin:16px auto;
  padding:0 12px;        /* menos margem para caber no mobile */
}

/* Header + logo */
.header{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,#7cc7ff,#44a8ff);
  color:#073b63;
  border-radius:14px;
  padding:12px 14px;     /* mais compacto no mobile */
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.header .brand{display:flex; align-items:center; gap:10px}
.header .brand .logo{height:36px; width:auto; object-fit:contain}
.header .brand span{font-size:18px; font-weight:800}

/* Cards / layout */
.grid{display:grid; gap:12px}          /* gap menor mobile */
.grid-2{grid-template-columns:1fr}     /* empilha no mobile */
.grid-3{grid-template-columns:1fr}     /* empilha no mobile */

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(16,24,40,.04);
  overflow:hidden;
}
.body{padding:14px}
.section{margin-bottom:12px}
.section-title{font-weight:800; margin:0 0 6px}
.row-2{display:grid; grid-template-columns:1fr; gap:10px}

/* Form / Inputs */
label{font-weight:700; margin-bottom:6px; display:block}
.input{
  width:100%;
  padding:14px 12px;                 /* zona de toque maior */
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:16px;
  -webkit-appearance:none;
  appearance:none;
}
.input::-webkit-outer-spin-button,
.input::-webkit-inner-spin-button{appearance:none; margin:0}
.muted{color:var(--muted); font-size:12px; margin-top:6px}

/* Separador */
.sep{border:0; border-top:1px solid var(--border); margin:12px 0}

/* Opções em cartões */
.cards{display:grid; grid-template-columns:1fr; gap:10px}
.opt-card{
  border:2px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  background:#fff;
}
.opt-card:active{transform:scale(.995)}
.opt-card:hover{transform:translateY(-1px)}
.opt-card.selected{border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,144,255,.12)}
.opt-media{height:250px; background:#eaf4ff url("") center/cover no-repeat}
.opt-body{padding:12px}
.opt-title{font-weight:800}
.opt-sub{font-size:12px; color:var(--muted)}

.check{display:flex; align-items:center; gap:8px}
.check input{width:20px; height:20px}

/* Resumo / Tabela (scrollable no mobile) */
.summary-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
}
.table-wrap{width:100%; overflow:auto; -webkit-overflow-scrolling:touch}
.table{
  width:100%; min-width:540px; /* permite scroll horizontal suave */
  border-collapse:collapse;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:14px;
}
.table th{background:#f0f6ff}
.total{font-size:22px; font-weight:900}   /* ligeiramente menor no mobile */
.warn{color:var(--warn); font-size:12px; margin-top:8px}

/* Nota/Disclaimer (suave) */
.disclaimer{
  margin-top:8px;
  font-size:12px;
  color:#475569;
  background:#f8fafc;
  border:1px dashed #e5e7eb;
  border-radius:8px;
  padding:8px 10px;
}

/* Ações / Botões */
.actions{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 16px; border:0; border-radius:10px; cursor:pointer; font-weight:800;
  width:100%;                           /* full-width no mobile */
  touch-action:manipulation;
}
.btn.wa{background:var(--accent); color:#05310f}
.btn.reset{background:#eef2f7; color:#111}

/* ============ ADMIN (BackOffice) ============ */
body.admin{background:#f6f8fb}
.admin-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; background:#fff; border-bottom:1px solid var(--border)
}
.admin-header .link{font-weight:800; color:#1e90ff; text-decoration:none}
.admin-main{max-width:1100px; margin:16px auto; padding:0 12px}
.fieldset{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; margin:10px 0
}
.fieldset h2{margin:0 0 8px; font-size:16px}
.form input{width:100%; padding:12px; border:1px solid var(--border); border-radius:10px}
.note{color:#667085; font-size:12px; margin-top:6px}
.alert{padding:10px 12px; border-radius:10px; margin:10px 0}
.alert.success{background:#ecfdf3; border:1px solid #86efac; color:#065f46}
.alert.error{background:#fef2f2; border:1px solid #fecaca; color:#991b1b}
.btn.primary{background:#1e90ff; color:#fff}
.admin-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center}
.card img.thumb{display:block; width:100%; max-width:320px; border:1px solid var(--border); border-radius:10px; margin:8px 0}
.upload input[type="file"]{display:block; margin-top:6px}
.upload input[type="text"]{margin-top:6px}

/* ===================== BREAKPOINTS ===================== */

/* >= 640px (sm) — duas colunas onde faz sentido */
@media (min-width:640px){
  .container{margin:20px auto; padding:0 16px}
  .grid-2{grid-template-columns:1.2fr .8fr}
  .row-2{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opt-media{height:250px}
  .actions{flex-direction:row}
  .btn{width:auto; min-width:140px}
  .total{font-size:24px}
}

/* >= 768px (md) — grelha mais folgada */
@media (min-width:768px){
  .container{margin:24px auto}
  .grid{gap:16px}
  .opt-media{height:250px}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* >= 1024px (lg) — desktop confortável */
@media (min-width:1024px){
  .container{margin:28px auto}
  .grid{gap:18px}
  .header{padding:18px 20px; border-radius:16px}
  .header .brand .logo{height:40px}
  .header .brand span{font-size:20px}
  .body{padding:18px}
  .opt-media{height:250px}
  .total{font-size:26px}
  .admin-main{padding:0 16px}
}

/* Acessibilidade & Touch */
@media (hover:none){
  .opt-card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}
/* wrapper com scroll (se for preciso) */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Tabela: deixa o browser calcular as larguras e quebrar texto */
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;           /* <- chave para permitir wraps */
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:14px;
  white-space:normal !important;   /* permite múltiplas linhas */
  word-break:break-word;           /* quebra palavras longas */
  overflow-wrap:anywhere;          /* quebra números/composições longas */
}

/* dá mais espaço à coluna “Valor” */
.summary .table th:first-child,
.summary .table td:first-child{ width: 38%; }
.summary .table th:last-child,
.summary .table td:last-child{ width: 62%; }

/* em ecrãs muito estreitos, deixa a coluna 2 ocupar ainda mais */
@media (max-width:640px){
  .summary .table th:first-child,
  .summary .table td:first-child{ width: 34%; }
  .summary .table th:last-child,
  .summary .table td:last-child{ width: 66%; }
}