/**
 * Amanda Estética — Transições entre telas, entrada/bloqueio e seletores mobile.
 * Ordem de carregamento importante: este arquivo faz parte da cascata modular.
 */

/* =========================================================
   v1.4.0 — Fundo rosa premium + transições iOS + wheel picker
   ========================================================= */
:root{
  --bg:#f8f1f5;
  --surface:rgba(255,255,255,.70);
  --surface-soft:rgba(255,246,250,.82);
  --surface-rose:rgba(252,227,236,.75);
  --line:rgba(220,195,205,.58);
  --shadow:0 22px 64px rgba(115,72,90,.12);
  --shadow-sm:0 10px 30px rgba(115,72,90,.09);
}
html,body{background:#f8f1f5}
body{
  background:
    radial-gradient(circle at 12% 15%, rgba(255,225,238,.92), transparent 26%),
    radial-gradient(circle at 82% 12%, rgba(255,238,247,.80), transparent 24%),
    radial-gradient(circle at 85% 88%, rgba(242,215,228,.74), transparent 28%),
    linear-gradient(180deg,#fcf7fa 0%,#f8eff4 100%);
}
body::before{opacity:.50;background:rgba(255,211,228,.86);filter:blur(58px)}
body::after{opacity:.48;background:rgba(244,206,222,.76);filter:blur(62px)}
.login-page{
  background:
    radial-gradient(circle at 18% 18%,rgba(255,224,236,.94) 0,transparent 33%),
    radial-gradient(circle at 86% 12%,rgba(255,238,246,.84) 0,transparent 28%),
    radial-gradient(circle at 82% 88%,rgba(244,214,226,.80) 0,transparent 32%),
    linear-gradient(180deg,#fdf8fb 0%,#f7eef4 100%);
}
.sidebar,.topbar,.mobile-bottom-nav{background:rgba(255,250,253,.68)!important}

/* Navegação em camadas, como telas de iOS */
.app-shell,.login-shell,.page{transform:translateZ(0);backface-visibility:hidden}
.page{will-change:transform,opacity;transform-origin:center}
.page-exit-left{animation:pageExitLeft .18s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.page-exit-right{animation:pageExitRight .18s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.page-enter-right{animation:pageEnterRight .38s cubic-bezier(.22,1,.36,1) both}
.page-enter-left{animation:pageEnterLeft .38s cubic-bezier(.22,1,.36,1) both}
.page-enter-soft{animation:pageEnterSoft .32s cubic-bezier(.22,1,.36,1) both}
.screen-enter-right{animation:screenEnterRight .48s cubic-bezier(.22,1,.36,1) both}
.screen-enter-left{animation:screenEnterLeft .48s cubic-bezier(.22,1,.36,1) both}
.screen-exit-left{animation:screenExitLeft .26s cubic-bezier(.4,0,1,1) both;pointer-events:none}
.screen-exit-right{animation:screenExitRight .26s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes pageExitLeft{to{opacity:0;transform:translate3d(-34px,0,0) scale(.992)}}
@keyframes pageExitRight{to{opacity:0;transform:translate3d(34px,0,0) scale(.992)}}
@keyframes pageEnterRight{from{opacity:0;transform:translate3d(44px,0,0) scale(.992)}to{opacity:1;transform:none}}
@keyframes pageEnterLeft{from{opacity:0;transform:translate3d(-44px,0,0) scale(.992)}to{opacity:1;transform:none}}
@keyframes pageEnterSoft{from{opacity:0;transform:translate3d(0,10px,0) scale(.996)}to{opacity:1;transform:none}}
@keyframes screenEnterRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes screenEnterLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes screenExitLeft{to{opacity:.10;transform:translate3d(-28%,0,0) scale(.985)}}
@keyframes screenExitRight{to{opacity:.10;transform:translate3d(28%,0,0) scale(.985)}}
.top-add-slot{display:inline-flex}

/* Login com leitura imediata de sistema */
.login-brand{position:relative}
.login-live-clock{position:absolute;top:-78px;left:0;font-size:16px;font-weight:800;letter-spacing:-.025em;color:#4a3d44;background:rgba(255,255,255,.50);border:1px solid rgba(255,255,255,.65);box-shadow:0 10px 28px rgba(117,73,91,.08);padding:8px 13px;border-radius:999px;backdrop-filter:blur(18px) saturate(135%)}
.sidebar-profile-row{display:flex;align-items:center;gap:7px}
.sidebar-profile-row .profile-mini{flex:1;min-width:0}
.sidebar-lock{flex:none}

/* Cabeçalho da visão geral */
.dashboard-greeting-block{min-width:0}
.dashboard-greeting-line{display:flex;align-items:center;gap:10px;min-width:0}
.dashboard-greeting-line h2{min-width:0}
.dashboard-privacy-button{width:38px;height:38px;flex:none;border:1px solid rgba(255,255,255,.72);border-radius:50%;display:grid;place-items:center;color:var(--rose-dark);background:rgba(255,255,255,.55);box-shadow:0 10px 24px rgba(117,73,91,.09);backdrop-filter:blur(16px) saturate(135%);transition:transform .26s cubic-bezier(.22,1,.36,1),background .22s ease,box-shadow .22s ease}
.dashboard-privacy-button:hover{transform:translateY(-2px);background:rgba(255,255,255,.82);box-shadow:0 14px 30px rgba(117,73,91,.13)}
.dashboard-privacy-button:active{transform:scale(.96)}
.dashboard-heading-actions{display:flex;align-items:center;gap:10px}
.live-time-card{min-width:148px;padding:10px 13px;border-radius:17px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 26px rgba(117,73,91,.08);backdrop-filter:blur(18px) saturate(135%);text-align:right}
.live-time-card time,.live-time-card small{display:block}
.live-time-card time{font-size:22px;line-height:1;font-weight:760;letter-spacing:-.045em;color:#352b31}
.live-time-card small{margin-top:5px;color:var(--muted);font-size:8px;text-transform:capitalize}
.privacy-value{display:inline-block;min-width:1.3em}
.privacy-value.is-hidden{letter-spacing:.14em;color:#8e7c85;font-weight:800}

/* Perfil da visão geral apenas informativo */
.pro-profile-static-card{justify-content:flex-start}
.pro-profile-static{display:grid;gap:10px;margin-top:14px}
.pro-profile-static>div{padding:13px 14px;border-radius:16px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.58)}
.pro-profile-static span,.pro-profile-static strong{display:block}
.pro-profile-static span{font-size:7px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.pro-profile-static strong{margin-top:5px;font-size:11px;line-height:1.45;overflow-wrap:anywhere}
.pro-profile-static p{display:flex;align-items:center;gap:6px;margin:2px 3px 0;color:var(--muted);font-size:8px;line-height:1.4}

/* Inputs de data e hora: normal no desktop, roleta no celular */
.ios-picker-control{display:block;position:relative}
.ios-native-picker{display:block;width:100%}
.ios-wheel-trigger{display:none;width:100%;height:46px;border:1px solid rgba(212,185,197,.64);border-radius:14px;padding:0 13px;background:rgba(255,255,255,.70);color:var(--ink);align-items:center;justify-content:space-between;box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(117,73,91,.06);text-align:left;font-size:12px;font-weight:650}
.ios-wheel-trigger .icon{color:#9d8791}

#picker-root{position:relative;z-index:500}
.ios-wheel-backdrop{position:fixed;inset:0;z-index:500;display:flex;align-items:flex-end;justify-content:center;background:rgba(41,31,37,.28);backdrop-filter:blur(14px) saturate(115%);animation:pickerBackdropIn .22s ease-out both}
.ios-wheel-backdrop.closing{animation:pickerBackdropOut .22s ease-in both}
.ios-wheel-sheet{width:min(560px,100%);background:rgba(250,247,249,.93);border:1px solid rgba(255,255,255,.74);border-radius:28px 28px 0 0;box-shadow:0 -28px 80px rgba(57,39,48,.20);overflow:hidden;backdrop-filter:blur(30px) saturate(140%);animation:pickerSheetIn .34s cubic-bezier(.22,1,.36,1) both;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.ios-wheel-sheet.closing{animation:pickerSheetOut .22s ease-in both}
.ios-wheel-sheet>header{height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 15px;border-bottom:1px solid rgba(212,194,202,.52);background:rgba(255,255,255,.28)}
.ios-wheel-sheet>header button{border:0;background:transparent;color:#8a7880;font-size:12px;padding:10px;text-align:left}
.ios-wheel-sheet>header button.confirm{text-align:right;color:var(--rose-dark);font-weight:800}
.ios-wheel-sheet>header strong{font-size:13px;letter-spacing:-.015em}
.ios-wheel-stage{height:220px;position:relative;display:flex;justify-content:center;overflow:hidden;padding:0 10px;mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%)}
.ios-wheel-selection{position:absolute;z-index:1;left:14px;right:14px;top:88px;height:44px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.82);box-shadow:0 8px 24px rgba(117,73,91,.08),inset 0 1px 0 rgba(255,255,255,.86);pointer-events:none}
.ios-wheel-column{height:220px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;position:relative;z-index:2;text-align:center;flex:1}
.ios-wheel-column::-webkit-scrollbar{display:none}
.ios-wheel-column[data-wheel="day"]{flex:.72}
.ios-wheel-column[data-wheel="month"]{flex:1.45}
.ios-wheel-column[data-wheel="year"]{flex:1}
.ios-wheel-column[data-wheel="hour"],.ios-wheel-column[data-wheel="minute"]{max-width:120px}
.ios-wheel-spacer{height:88px;pointer-events:none}
.ios-wheel-item{display:block;width:100%;height:44px;scroll-snap-align:center;border:0;background:transparent;color:#9f949a;font-size:17px;line-height:44px;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s ease,transform .16s ease,font-weight .16s ease}
.ios-wheel-item.selected{color:#2d2630;font-size:20px;font-weight:720;transform:scale(1.02)}
.ios-wheel-colon{position:absolute;z-index:3;left:50%;top:88px;transform:translateX(-50%);height:44px;line-height:42px;font-size:21px;font-weight:800;color:#463941;pointer-events:none}
@keyframes pickerBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes pickerBackdropOut{to{opacity:0}}
@keyframes pickerSheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes pickerSheetOut{to{transform:translateY(100%)}}

@media(max-width:860px){
  body{background:
    radial-gradient(circle at 10% 5%,rgba(255,225,238,.92),transparent 28%),
    radial-gradient(circle at 92% 32%,rgba(248,221,233,.72),transparent 25%),
    linear-gradient(180deg,#fcf7fa 0%,#f7edf3 100%)}
  .ios-native-picker{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;overflow:hidden!important}
  .ios-wheel-trigger{display:flex}
  .dashboard-heading-actions{width:100%;justify-content:space-between;align-items:stretch}
  .live-time-card{min-width:150px;text-align:left}
  .pro-dashboard-heading{flex-direction:column;align-items:stretch!important}
  .pro-dashboard-heading .dashboard-heading-actions>.btn{display:none}
  .dashboard-greeting-line h2{font-size:28px}
  .screen-enter-right,.screen-enter-left,.screen-exit-left,.screen-exit-right{position:relative;min-height:100vh}
  .login-live-clock{top:-54px}
}
@media(max-width:600px){
  .dashboard-greeting-line{align-items:flex-start}
  .dashboard-greeting-line h2{font-size:26px;line-height:1.05}
  .dashboard-privacy-button{width:36px;height:36px}
  .live-time-card{min-width:0;flex:1;max-width:190px}
  .live-time-card time{font-size:20px}
  .pro-profile-static>div{padding:12px}
  .ios-wheel-sheet{border-radius:26px 26px 0 0}
}
@media(prefers-reduced-motion:reduce){
  .page-exit-left,.page-exit-right,.page-enter-left,.page-enter-right,.page-enter-soft,.screen-enter-left,.screen-enter-right,.screen-exit-left,.screen-exit-right,.ios-wheel-backdrop,.ios-wheel-sheet{animation:none!important}
}