/* =========================================================
   TITAN — Camada iOS (cara de iPhone) — FASE 1 (fundacao)
   Mesma paleta: usa SO os tokens atuais (var(--bg/surface/red/...)).
   Mobile-first; nao deve degradar o desktop. Carregar depois do
   ui-states.css. Isolada -> remover o <link> volta ao estado anterior.
   ========================================================= */

:root{
  --ios-r-card: 18px;
  --ios-r-cell: 13px;
  --ios-r-btn:  13px;
  --ios-r-sheet:22px;
  --hairline:   .5px;
}

/* 1. FONTE DO SISTEMA (no iPhone vira SF Pro real) na interface.
   Os titulos de marca usam 'Roca One' no proprio CSS -> ficam intactos. */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Outfit",sans-serif !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Android: mata o double-tap-to-zoom nos controles (a "barra de baixo que dava zoom")
   manipulation = permite rolar e pinça, mas tira o zoom por toque-duplo e o delay de 300ms */
button,a,label,select,input,textarea,summary,[role="button"],[onclick],
.tbar,.tbar-i,.tmfab,.tmbell,.tmi,.tmbtn,.qa-btn,.qa-card,.filter-pill,.hm-filter,
.rank-period-btn,.cat-tab,.bf-tab,.nu-pbtn,.btn-save,.btn-log,.btn-finish{
  touch-action:manipulation;
}

/* elementos de UI que fixam 'Outfit'/'Roca' herdam a stack do sistema */
input,select,textarea,button,
.btn-save,.btn-log,.btn-finish,.qa-btn,.qa-label,.qa-sub,
.fg label,.stat-label,.search-input,.rec-skip,
.tmi,.filter-pill,.hm-filter,.rank-period-btn,.cat-tab,.pr-table,.med-grid{
  font-family:inherit !important;
}

/* 2. FEEDBACK DE TOQUE (estilo iOS): sem highlight cinza; leve fade no toque */
a,button,input,select,textarea,
.qa-card,.panel,.rank-item,.filter-pill,.hm-filter,.rank-period-btn,
.tmi,.btn-save,.btn-log,.btn-finish,.qa-btn,.rc,.rec-card,.c-card{
  -webkit-tap-highlight-color:transparent;
}

@media (hover:none){
  .btn-save:active,.btn-log:active,.btn-finish:active,.qa-btn:active,
  .qa-card:active,.rc:active,.rec-card:active,.c-card:active,
  .filter-pill:active,.hm-filter:active,.rank-period-btn:active{
    opacity:.6; transition:opacity .04s ease;
  }
}

/* 3. BOTOES iOS — preenchido bem arredondado, peso 600, mais "gordo" (todos os .btn-*) */
.btn-save,.btn-log,.btn-finish,.btn-start,.btn-assinar,.btn-danger,.btn-logout,
.btn-modal-primary,.btn-modal-outline,.btn-avatar-opt,.um-btn,.bm-btn,
.rec-confirm,.rec-skip,.theme-opt,.crop-btn,.lo-btn,.qa-btn{
  border-radius:14px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* botoes principais ganham corpo (altura iOS) */
.btn-save,.btn-start,.btn-assinar,.btn-modal-primary,.um-btn,.bm-btn,.rec-confirm{
  padding:14px 20px !important;
  font-size:1.02rem !important;
}

/* 4. CAMPOS iOS — cantos arredondados, borda fina, fundo surface */
.fg input,.fg select,.fg textarea,.search-input,
input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="password"],input[type="date"],select,textarea{
  border-radius:12px !important;
  border:1px solid var(--border) !important;
  padding:13px 14px !important;
  -webkit-appearance:none;
  appearance:none;
}

/* 5. CARDS / PAINEIS iOS — grouped inset: sem borda, fundo solido, cantos bem suaves */
.panel{
  border-radius:18px !important;
  border:none !important;
  background:var(--bg2) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.22) !important;
}

.qa-card,.stat-card,.rank-item,.badge-card,.quest-item,.c-card,.rc,.rec-card,.level-card{
  border-radius:16px !important;
}

/* 6. Mantem os titulos como estao (Roca One). Ajuste fino de header iOS vem na Fase 3. */


/* =========================================================
   FASE 2 — CONTROLES iOS
   ========================================================= */

/* SLIDER iOS — trilho fino + thumb redondo branco com sombra */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  height:6px; border-radius:999px; background:var(--surface-h); outline:none; padding:0 !important;
}
input[type="range"]::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:transparent; }
input[type="range"]::-moz-range-track{ height:6px; border-radius:999px; background:var(--surface-h); }

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:27px; height:27px; margin-top:-10.5px;
  border-radius:50%; background:#fff; border:none; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.08);
}

input[type="range"]::-moz-range-thumb{
  width:27px; height:27px; border-radius:50%; background:#fff; border:none; cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* SEGMENTED CONTROL iOS — o container vira "trilho", o ativo vira pilula */
.hm-filters,.rank-period{
  display:inline-flex !important; background:var(--surface) !important;
  border-radius:11px !important; padding:3px !important; gap:2px !important; flex-wrap:nowrap !important;
}

.hm-filter,.rank-period-btn{
  border:none !important; background:none !important; box-shadow:none !important;
  border-radius:8px !important; padding:6px 13px !important; color:var(--text2) !important;
  white-space:nowrap; transition:background .2s, color .2s;
}

.hm-filter.active,.rank-period-btn.active{
  background:var(--bg2) !important; color:var(--text) !important;
  box-shadow:0 1px 3px rgba(0,0,0,.28) !important;
}

/* SWITCH iOS — componente .ios-switch (markup: <label class="ios-switch"><input type="checkbox"><span class="ios-switch-track"></span><span class="ios-switch-knob"></span></label>) */
.ios-switch{ position:relative; display:inline-block; width:51px; height:31px; flex-shrink:0; cursor:pointer; }
.ios-switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.ios-switch-track{ position:absolute; inset:0; border-radius:999px; background:var(--surface-h); transition:background .25s ease; }
.ios-switch-knob{ position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.34,1.4,.64,1); }
.ios-switch input:checked ~ .ios-switch-track{ background:var(--green,#22c55e); }
.ios-switch input:checked ~ .ios-switch-knob{ transform:translateX(20px); }


/* =========================================================
   FASE 3 — BOTTOM SHEETS (so dialogos de confirmacao; celebracoes,
   cropper e loading continuam centralizados)
   ========================================================= */
.confirm-ov,.logout-ov,.warn-ov,.consent-overlay,.summary-ov{
  align-items:flex-end !important;
  padding:0 !important;
}

.confirm-ov > *,.logout-ov > *,.warn-ov > *,.consent-overlay > *,.summary-ov > *{
  width:100% !important;
  max-width:560px !important;
  margin:0 auto !important;
  border-radius:var(--ios-r-sheet) var(--ios-r-sheet) 0 0 !important;
  padding-top:26px !important;
  padding-bottom:calc(env(safe-area-inset-bottom) + 22px) !important;
  position:relative;
  animation:iosSheetUp .42s cubic-bezier(.32,.72,0,1) both;
}

/* puxador (grabber) REAL — handle de arrastar (js/ios.js injeta o .ios-grabber) */
.ios-grabber{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:28px; z-index:4; touch-action:none; cursor:grab;
}

.ios-grabber::after{
  content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:38px; height:5px; border-radius:3px; background:var(--text3); opacity:.55;
}

@keyframes iosSheetUp{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* LARGE TITLE colapsado — barra compacta translucida que aparece ao rolar */
.ios-topbar{
  position:fixed; top:0; left:0; right:0; z-index:590;
  height:calc(env(safe-area-inset-top) + 46px); padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; justify-content:center;
  font:600 1.02rem -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  color:var(--text);
  background:var(--nav-bg,rgba(13,22,69,.8));
  -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4);
  border-bottom:.5px solid var(--border);
  transform:translateY(-101%); transition:transform .32s cubic-bezier(.32,.72,0,1);
  pointer-events:none;
}
.ios-topbar.show{ transform:translateY(0); pointer-events:auto; }

@media (width >=861px){ .ios-topbar{ display:none !important; } }


/* =========================================================
   PACOTE DE POLISH NATIVO + DYNAMIC ISLAND
   ========================================================= */

/* Numeros em SF Pro Rounded (mais amigavel/nativo) */
.stat-val,.stat-value,.tw-stat-val,.evo-stat-val,.rank-stat-val,.lvl-num,.xp-now,.mc-count{
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif !important;
  font-weight:700 !important; font-variant-numeric:tabular-nums;
}

/* Tab bar: "pulinho" no icone da aba ativa (entrada) + afunda no toque */
@media (width <=860px){
  .tbar-i:active svg,.tbar-i:active .tbh{ transform:scale(.84) !important; transition:transform .08s; }
  .tbar-i.active svg,.tbar-i.active .tbar-logo,.tbar-home.active .tbh{ animation:iosTabPop .45s cubic-bezier(.34,1.56,.64,1) both; }
}

@keyframes iosTabPop{ 0%{transform:scale(.6)} 55%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* Toasts estilo iOS (pill arredondada, vidro) */
.toast,.tfs-toast{
  border-radius:16px !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 10px 30px rgba(0,0,0,.4) !important;
  font-family:inherit !important;
}

/* Cronometro de descanso estilo DYNAMIC ISLAND (pilula preta no topo) */
@media (width <=860px){
  .rest-mini{
    top:auto !important;
    bottom:calc(env(safe-area-inset-bottom) + 84px) !important;
    left:50% !important;
    transform:translateX(-50%) translateY(0) !important;
    width:auto !important; max-width:92vw !important;
    background:#0a0a0c !important;
    border:1px solid rgba(255,255,255,.1) !important;
    border-radius:999px !important;
    padding:10px 18px !important;
    box-shadow:0 10px 30px rgba(0,0,0,.55) !important;
    z-index:620 !important;
  }
  .rest-mini.show{ transform:translateX(-50%) translateY(0) !important; }
}

/* Spinner do pull-to-refresh (criado por js/ios.js) */
.ios-ptr{
  position:fixed; top:0; left:50%; transform:translateX(-50%) translateY(-44px);
  width:34px; height:34px; z-index:589; display:flex; align-items:center; justify-content:center;
  margin-top:calc(env(safe-area-inset-top) + 6px);
  border-radius:50%; background:var(--nav-bg,rgba(13,22,69,.85));
  backdrop-filter:blur(14px); box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0; transition:opacity .15s;
  pointer-events:none;
}
.ios-ptr svg{ width:20px; height:20px; color:var(--red,#BA1525); }
.ios-ptr.spin svg{ animation:iosSpin .7s linear infinite; }

@keyframes iosSpin{ to{ transform:rotate(360deg); } }

/* SWIPE-TO-DELETE: esconde a lixeira (agora apaga arrastando pra esquerda) */
[onclick^="deleteRoutine"],[onclick^="deleteGoal"]{ display:none !important; }
.rc,.goal-item{ touch-action:pan-y; }

/* ACTION SHEET iOS (long-press -> menu de contexto) */
.ios-actsheet{
  position:fixed; inset:0; z-index:9970; display:flex; flex-direction:column; justify-content:flex-end;
  background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  padding:8px; padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  opacity:0; transition:opacity .2s ease;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
}
.ios-actsheet.show{ opacity:1; }

.ias-card{
  background:rgba(30,36,66,.66); -webkit-backdrop-filter:blur(32px) saturate(1.7); backdrop-filter:blur(32px) saturate(1.7);
  border:.5px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden;
  transform:translateY(24px); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.ios-actsheet.show .ias-card{ transform:translateY(0); }
.ias-btn{ display:block; width:100%; border:none; background:none; color:#fff; font:500 1.06rem inherit; padding:16px; cursor:pointer; border-bottom:.5px solid rgba(255,255,255,.12); }
.ias-btn:last-child{ border-bottom:none; }
.ias-btn:active{ background:rgba(255,255,255,.1); }
.ias-btn.danger{ color:#ff5a5f; font-weight:600; }

.ias-cancel{
  display:block; width:100%; margin-top:8px; border:none; border-radius:16px;
  background:rgba(40,46,80,.85); -webkit-backdrop-filter:blur(32px); backdrop-filter:blur(32px);
  color:#ff5a5f; font:700 1.06rem inherit; padding:16px; cursor:pointer;
  transform:translateY(24px); transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.ios-actsheet.show .ias-cancel{ transform:translateY(0); }

/* =========================================================
   MODO LEVE — Android mid-range (sem backdrop-filter pesado)
   Ativado via js/auth.js: document.documentElement.classList.add('os-lite')
   ========================================================= */
.os-lite .ios-topbar{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(13,22,69,.96);
}
.os-lite .toast,.os-lite .tfs-toast{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(18,24,40,.97) !important;
}
.os-lite .ios-ptr{
  backdrop-filter:none;
  background:rgba(13,22,69,.97);
}
.os-lite .ios-actsheet{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(0,0,0,.6);
}
.os-lite .ias-card{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(24,30,50,.98);
}
.os-lite .ias-cancel{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:rgba(35,40,65,.98);
}