/* Medcar Financeiro — camada PWA compartilhada */

/* #2 — evita zoom automatico do iOS ao focar campos (fonte < 16px) */
input, select, textarea { font-size: 16px; }

/* #4 — safe-area do iPhone (notch / Dynamic Island) no cabecalho escuro */
header { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }

/* #3 — overlay de carregamento */
#pwa-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#pwa-overlay.show{display:flex}
#pwa-overlay .box{background:#fff;padding:22px 26px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#pwa-overlay .sp{width:34px;height:34px;border:3px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:pwaspin .8s linear infinite}
#pwa-overlay .txt{font:600 14px -apple-system,Segoe UI,Roboto,sans-serif;color:#334155}
@keyframes pwaspin{to{transform:rotate(360deg)}}

/* #5 — barra de navegacao inferior (tab bar) */
body.has-tabbar{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;background:#0f172a;border-top:1px solid #1e293b;padding-bottom:env(safe-area-inset-bottom,0px)}
#tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 8px;color:#94a3b8;text-decoration:none;font:600 11px -apple-system,Segoe UI,Roboto,sans-serif}
#tabbar a .ic{font-size:20px;line-height:1}
#tabbar a.ativo{color:#fff}
#tabbar a.mais .ic{background:#2563eb;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin-top:-4px;box-shadow:0 3px 8px rgba(37,99,235,.5)}

/* #10 — dica de instalacao no iOS */
#pwa-hint{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:950;background:#1e293b;color:#e2e8f0;padding:12px 14px;border-radius:12px;font:500 13px -apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35);line-height:1.45}
#pwa-hint b{color:#fff}
#pwa-hint #pwa-hint-x{float:right;margin-left:10px;color:#94a3b8;cursor:pointer;font-weight:700}

/* #9 — no desktop/Windows: esconde a tab bar e aproveita a largura da tela */
@media (min-width:820px){
  #tabbar{display:none}
  body.has-tabbar{padding-bottom:0}
  .container{max-width:1100px !important}
}

/* ============================================================
   MEDCAR — sistema de design (tokens + tema claro/escuro)
   ============================================================ */
:root{
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bg:#eef2f9; --surface:#ffffff; --surface-2:#f8fafc;
  --text:#0f172a; --muted:#64748b; --border:#e6eaf2;
  --primary:#2563eb; --primary-600:#1d4ed8;
  --grad-primary:linear-gradient(135deg,#2563eb,#1d4ed8);
  --grad-header:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  --grad-saldo:linear-gradient(135deg,#1d4ed8 0%,#0f172a 100%);
  --pos:#16a34a; --neg:#dc2626;
  --pos-bg:#dcfce7; --pos-fg:#166534;
  --neg-bg:#fee2e2; --neg-fg:#991b1b;
  --warn-bg:#fef9c3; --warn-fg:#854d0e;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.06);
  --shadow-sm:0 1px 3px rgba(15,23,42,.09);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0f1c; --surface:#141d30; --surface-2:#0f1728;
    --text:#e7eef9; --muted:#94a3b8; --border:#25324a;
    --grad-header:linear-gradient(135deg,#0a0f1c 0%,#141d30 100%);
    --grad-saldo:linear-gradient(135deg,#1d4ed8 0%,#0a0f1c 100%);
    --pos-bg:rgba(22,163,74,.20); --pos-fg:#4ade80;
    --neg-bg:rgba(220,38,38,.20); --neg-fg:#f87171;
    --warn-bg:rgba(234,179,8,.18); --warn-fg:#fde047;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.4);
    --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  }
}

/* ---- universais (seguros p/ todas as telas, inclusive auth) ---- */
body{ font-family:var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
*{ -webkit-tap-highlight-color:transparent; }
.valor{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
button, .btn, input[type=submit]{ -webkit-appearance:none; appearance:none; border-radius:var(--radius-sm) !important; font-weight:600; transition:transform .06s ease, box-shadow .2s ease, filter .2s ease; }
button:active, .btn:active, input[type=submit]:active{ transform:translateY(1px); }
button[type=submit]:not([class]){ background-image:var(--grad-primary); color:#fff !important; box-shadow:0 6px 16px rgba(37,99,235,.28); }
button[type=submit]:not([class]):hover{ filter:brightness(1.04); }

/* ---- escopo do APP (telas claras) — não afeta login/cadastro escuros ---- */
body.app-page{ background:var(--bg); color:var(--text); }
body.app-page .container{ animation:pwaFade .28s ease both; }
@keyframes pwaFade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

body.app-page header{
  background:var(--grad-header); color:#fff;
  position:sticky; top:0; z-index:800;
  box-shadow:0 2px 14px rgba(0,0,0,.18);
  padding-top:calc(env(safe-area-inset-top,0px) + 16px);
}
body.app-page header a{ color:#cbd5e1; }
body.app-page h1, body.app-page h2, body.app-page h3{ color:var(--text); }
body.app-page header h1, body.app-page header h2, body.app-page header h3{ color:#fff; }

body.app-page .card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .2s ease;
}
body.app-page a.card:active, body.app-page .card.clic:active{ transform:scale(.985); }
body.app-page .card .label, body.app-page .label{ color:var(--muted); letter-spacing:.03em; }
body.app-page .card .valor, body.app-page .valor{ color:var(--text); }
body.app-page .verde{ color:var(--pos) !important; }
body.app-page .vermelho{ color:var(--neg) !important; }

/* saldo / cartão de destaque */
body.app-page .saldo{ background:var(--grad-saldo) !important; border:none; box-shadow:0 10px 26px rgba(29,78,216,.30); }
body.app-page .saldo .label{ color:rgba(255,255,255,.75); }
body.app-page .saldo .valor{ color:#fff; }

/* stat cards (dashboard) */
body.app-page .stat .stat-top{ display:flex; align-items:center; gap:9px; }
body.app-page .stat-ic{ width:30px; height:30px; border-radius:9px; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--primary); flex:0 0 auto; }
body.app-page .stat-ic svg{ width:18px; height:18px; }
body.app-page .saldo .stat-ic{ background:rgba(255,255,255,.15); color:#fff; }

/* campos */
body.app-page input, body.app-page select, body.app-page textarea{
  background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm);
}
body.app-page input:focus, body.app-page select:focus, body.app-page textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.16);
}
body.app-page input::placeholder{ color:var(--muted); opacity:.7; }
body.app-page a{ color:var(--primary); }

/* tabelas (relatórios) */
body.app-page table{ color:var(--text); border-color:var(--border); }
body.app-page th, body.app-page td{ border-color:var(--border) !important; }
body.app-page thead th{ color:var(--muted); }
body.app-page tbody tr:nth-child(even){ background:var(--surface-2); }

/* ---- chips / tags de status (#9) ---- */
.tag, .badge, .chip{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.4; }
.tag-estoque{ background:var(--warn-bg); color:var(--warn-fg); }
.tag-vendido{ background:var(--pos-bg); color:var(--pos-fg); }
.tag-alerta{ background:var(--neg-bg); color:var(--neg-fg); }

/* ---- tab bar: ícones SVG (#10) ---- */
#tabbar{ background:var(--grad-header); border-top:1px solid var(--border); }
#tabbar a .ic{ font-size:0; }
#tabbar a .ic svg{ width:23px; height:23px; }
#tabbar a.mais .ic{ width:40px; height:40px; }
#tabbar a.mais .ic svg{ width:24px; height:24px; }

/* ---- toast (#8) ---- */
#pwa-toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(80px + env(safe-area-inset-bottom,0px));
  background:var(--text); color:var(--surface); padding:12px 18px; border-radius:12px; font:600 14px var(--font);
  box-shadow:0 10px 30px rgba(0,0,0,.3); opacity:0; transition:opacity .25s ease, transform .25s ease; z-index:9998; pointer-events:none; max-width:88%; }
#pwa-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- skeleton shimmer util (#8) ---- */
.skeleton{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:pwaShimmer 1.3s ease infinite; border-radius:8px; color:transparent !important; }
@keyframes pwaShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---- auth (login/cadastro): leve modernização, mantendo o escuro ---- */
.caixa{ border-radius:20px !important; box-shadow:0 20px 50px rgba(0,0,0,.45) !important; }

/* fix-ios-botao-primario: iOS renderiza <button> nativo com texto azul sem appearance:none */
body.app-page button[type=submit]{ color:#fff; }

/* ============================================================
   Swipe p/ excluir/editar (acoes inline por padrao; swipe em touch)
   ============================================================ */
.swipe-row{ display:flex; align-items:center; }
.swipe-row .swipe-content{ flex:1; min-width:0; display:flex; justify-content:space-between; align-items:center; }
.swipe-row .swipe-actions{ display:flex; align-items:center; gap:8px; }
.swipe-actions .swipe-del{ -webkit-appearance:none; appearance:none; background:var(--neg); color:#fff !important; border:none; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer; }
body.swipe-on .swipe-row{ position:relative; overflow:hidden; display:block; padding:0 !important; }
body.swipe-on .swipe-row .swipe-content{ position:relative; z-index:1; padding:12px 16px; background:var(--surface); transform:translateX(0); transition:transform .22s cubic-bezier(.2,.7,.2,1); will-change:transform; }
body.swipe-on .swipe-row.dragging .swipe-content{ transition:none; }
body.swipe-on .swipe-row .swipe-actions{ position:absolute; top:0; right:0; z-index:0; height:100%; padding:0 12px; margin:0; }
body.swipe-on .swipe-row .swipe-actions form{ margin:0 !important; }
body.swipe-on .swipe-row.open .swipe-content{ transform:translateX(var(--swipe-w,-104px)); }