/* Réplica 2) SAÚDE  (Inter, azul-petróleo #407F9A). Telas em 2x, como em apps.css. */
.saude { font-family: Inter, sans-serif; color: #17303A; }
.saude.nb-conteudo { display: grid; grid-template-columns: 64px 1fr; background: #F4F8F9; }
.sa-trilho { background: #173A47; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0 14px; }
.sa-marca { width: 34px; height: 34px; border-radius: 11px 11px 11px 3px; background: linear-gradient(135deg, #7FC4D8, #407F9A); margin-bottom: 14px; }
.sa-trilho span { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #8FB3BF; font-size: 19px; }
.sa-trilho span.on { background: #407F9A; color: #fff; }
.sa-trilho .fim { margin-top: auto; }
.sa-main { position: relative; overflow: hidden; }
.sa-topo { height: 74px; display: flex; align-items: center; gap: 16px; padding: 0 18px; }
.sa-topo > div:first-child { margin-right: auto; }
.sa-topo h4 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sa-topo p { font-size: 12px; color: #6E8790; }
.sa-semana { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6E8790; }
.sa-semana b { color: #17303A; font-weight: 600; }
.sa-semana .ic { font-size: 16px; }
.sa-seg { display: flex; background: #E3ECEF; border-radius: 9px; padding: 3px; font-size: 12px; font-weight: 500; color: #557079; }
.sa-seg span { padding: 6px 11px; border-radius: 7px; }
.sa-seg .on { background: #fff; color: #17303A; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #407F9A; color: #fff; border-radius: 9px; padding: 9px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sa-btn .ic { font-size: 15px; }
.sa-btn.largo { width: 100%; margin-top: 12px; }
.sa-btn.cinza { background: #EAF1F3; color: #407F9A; }
.sa-corpo { display: grid; grid-template-columns: 1fr 196px; gap: 14px; padding: 0 18px; }
.sa-cal { background: #fff; border: 1px solid #E1EAED; border-radius: 12px; overflow: hidden; }
.sa-cab { display: grid; grid-template-columns: 44px repeat(5, 1fr); height: 42px; border-bottom: 1px solid #E8EFF1; }
.sa-cab div { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #6E8790; }
.sa-cab b { font-size: 15px; color: #17303A; }
.sa-cab .hoje b { background: #407F9A; color: #fff; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.sa-grade { position: relative; display: grid; grid-template-columns: 44px repeat(5, 1fr); height: 430px;
  background: repeating-linear-gradient(#fff 0 42px, #EEF3F5 42px 43px); }
.sa-horas { position: relative; }
.sa-horas span { position: absolute; right: 6px; font-size: 10px; color: #9AB0B7; padding-top: 3px; }
.sa-col { position: relative; border-left: 1px solid #EEF3F5; }
.sa-bloco { position: absolute; left: 3px; right: 3px; border-radius: 7px; padding: 5px 7px; font-size: 11px; line-height: 1.25; overflow: hidden; border-left: 3px solid; }
.sa-bloco b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-bloco small { font-size: 10px; opacity: .8; white-space: nowrap; }
.sa-bloco.p { background: #E3F1F5; border-color: #407F9A; color: #1E5468; }
.sa-bloco.o { background: #EEEAFB; border-color: #7A62D3; color: #4B3A97; }
.sa-bloco.r { background: #FFF3DC; border-color: #E0A33A; color: #8A5D12; }
.sa-bloco.trava { background: repeating-linear-gradient(135deg, #F3F6F7 0 6px, #E9EFF1 6px 12px); border-color: #B9C8CD; color: #6E8790; }
.sa-bloco.novo { opacity: 0; transform: translateY(-16px) scale(.96); transition: opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); box-shadow: 0 6px 16px rgba(122,98,211,.35); z-index: 3; }
.sa-bloco.novo.on { opacity: 1; transform: none; }
.sa-agora { position: absolute; left: -4px; right: 0; height: 2px; background: #E5484D; z-index: 2; }
.sa-agora::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
.sa-lateral { display: flex; flex-direction: column; gap: 12px; }
.sa-card { background: #fff; border: 1px solid #E1EAED; border-radius: 12px; padding: 13px 14px; }
.sa-card > small { font-size: 11px; color: #6E8790; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.sa-num { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #6E8790; margin: 3px 0 8px; }
.sa-num b { font-size: 26px; color: #17303A; letter-spacing: -.02em; }
.sa-legenda { display: grid; gap: 5px; font-size: 11.5px; color: #557079; }
.sa-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; }
.sa-legenda i.p { background: #407F9A; }
.sa-legenda i.o { background: #7A62D3; }
.sa-legenda i.r { background: #E0A33A; }
.sa-legenda em { font-style: normal; }
.sa-pac { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 13px; }
.sa-pac b { display: block; font-weight: 600; }
.sa-pac em { font-style: normal; font-size: 11.5px; color: #6E8790; }
.sa-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.sa-spark { width: 100%; height: 40px; }

/* teleconsulta */
.sa-video { position: absolute; left: 0; top: 0; bottom: 0; right: 300px; background: #0F2530; overflow: hidden; }
.sa-video > .sa-pessoa { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-tag { position: absolute; left: 16px; top: 16px; background: rgba(10,25,32,.65); color: #fff; border-radius: 99px; padding: 6px 12px; font-size: 12px; display: flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
.sa-tag i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
.sa-eu { position: absolute; right: 16px; bottom: 84px; width: 150px; height: 104px; border-radius: 12px; overflow: hidden; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 6px 16px rgba(0,0,0,.3); }
.sa-eu .sa-pessoa { width: 100%; height: 100%; display: block; }
.sa-ctrl { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 12px; }
.sa-ctrl span { width: 46px; height: 46px; border-radius: 50%; background: rgba(15,37,48,.55); color: #fff; display: grid; place-items: center; font-size: 19px; }
.sa-ctrl .fim { background: #E5484D; }
.sa-pront { position: absolute; right: 0; top: 0; bottom: 0; width: 300px; background: #fff; padding: 18px; display: flex; flex-direction: column; }
.sa-pront h5 { font-size: 17px; font-weight: 700; }
.sa-pront .sa-pac { margin: 8px 0 10px; }
.sa-alerta { display: flex; align-items: center; gap: 7px; background: #FDECEC; color: #B4302F; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 7px 10px; }
.sa-abas { display: flex; gap: 16px; border-bottom: 1px solid #E8EFF1; margin: 12px 0 10px; font-size: 12.5px; color: #8AA0A7; }
.sa-abas span { padding-bottom: 8px; }
.sa-abas .on { color: #407F9A; font-weight: 600; box-shadow: inset 0 -2px #407F9A; }
.sa-rot { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8AA0A7; font-weight: 600; margin-bottom: 5px; }
.sa-texto { min-height: 76px; border: 1px solid #DCE6E9; border-radius: 9px; padding: 9px 10px; font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
.sa-rx { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid #F0F4F5; animation: entra .35s ease-out; }
.sa-rx .ic { color: #2E9E6E; font-size: 15px; stroke-width: 2.6; }
.sa-rx span { flex: 1; font-weight: 500; }
.sa-rx em { font-style: normal; font-size: 11px; color: #8AA0A7; background: #F1F5F6; border-radius: 99px; padding: 2px 8px; }
.sa-pront .sa-btn.largo { margin-top: auto; }
.sa-toast { position: absolute; left: calc(50% - 150px); top: 62px; transform: translate(-50%, -20px); opacity: 0; transition: .4s; background: #17303A; color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 500; display: flex; gap: 8px; align-items: center; white-space: nowrap; z-index: 4; }
.sa-toast .ic { color: #6FD6A6; stroke-width: 2.6; }
.sa-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* app da paciente */
.saude.cel-conteudo { background: #F4F8F9; }
.sa-chead { background: linear-gradient(160deg, #2B6A82, #407F9A 60%, #5C9DB4); color: #fff; padding: 62px 20px 22px; border-radius: 0 0 26px 26px; }
.sa-ola { display: flex; justify-content: space-between; align-items: center; }
.sa-ola small { display: block; font-size: 13px; opacity: .75; }
.sa-ola b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.sa-ola .sa-av { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.6); }
.sa-cbusca { margin-top: 16px; height: 46px; border-radius: 14px; background: #fff; color: #8AA0A7; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; }
.sa-cbusca .ic { color: #407F9A; font-size: 18px; }
.sa-cpag { padding: 18px 18px 0; }
.sa-esps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.sa-esp { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: #3D5862; }
.sa-esp .ic { width: 54px; height: 54px; padding: 15px; border-radius: 16px; background: #fff; color: #407F9A; box-shadow: 0 2px 6px rgba(23,48,58,.06); }
.sa-h6 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.sa-medico { display: flex; gap: 12px; align-items: center; background: #fff; border-radius: 18px; padding: 10px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(23,48,58,.06); font-size: 13px; }
.sa-medico b { display: block; font-weight: 700; font-size: 14px; }
.sa-medico small { display: block; color: #6E8790; font-size: 12px; }
.sa-medico em { font-style: normal; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.sa-medico em .ic { color: #F2B230; fill: #F2B230; font-size: 13px; }
.sa-medico em span { color: #8AA0A7; font-weight: 400; }
.sa-foto { width: 62px; height: 62px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; }
.sa-foto .sa-pessoa { width: 100%; height: 100%; display: block; }
.sa-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: #fff; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 14px; border-top: 1px solid #E8EFF1; }
.sa-tabbar span { font-size: 22px; color: #A9BCC2; width: 44px; height: 34px; display: grid; place-items: center; border-radius: 12px; }
.sa-tabbar .on { color: #407F9A; background: #E3F1F5; }
.sa-perfil { background: #fff; padding: 64px 20px 18px; text-align: center; border-radius: 0 0 26px 26px; box-shadow: 0 4px 14px rgba(23,48,58,.06); }
.sa-foto.g { width: 82px; height: 82px; border-radius: 50%; margin: 0 auto 10px; }
.sa-perfil b { display: block; font-size: 18px; font-weight: 700; }
.sa-perfil small { font-size: 13px; color: #6E8790; }
.sa-dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 18px; }
.sa-dias span { background: #fff; border-radius: 14px; padding: 9px 0; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; color: #6E8790; border: 1.5px solid #E1EAED; transition: .3s; }
.sa-dias b { font-size: 17px; color: #17303A; }
.sa-dias .on { background: #407F9A; border-color: #407F9A; color: #D3E8EF; }
.sa-dias .on b { color: #fff; }
.sa-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 18px; }
.sa-slots span { text-align: center; background: #fff; border: 1.5px solid #E1EAED; border-radius: 12px; padding: 10px 0; font-size: 13.5px; font-weight: 600; transition: .3s; }
.sa-slots .ocupado { color: #BFCDD2; text-decoration: line-through; background: #F4F8F9; }
.sa-slots .on { background: #407F9A; border-color: #407F9A; color: #fff; }
.sa-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.sa-modo span { display: flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid #E1EAED; border-radius: 12px; padding: 10px 0; font-size: 13px; font-weight: 600; color: #6E8790; background: #fff; }
.sa-modo .on { border-color: #407F9A; color: #407F9A; background: #EAF4F7; }
.sa-cbotao { position: absolute; left: 18px; right: 18px; bottom: 26px; height: 52px; border-radius: 16px; background: #407F9A; color: #fff; font-size: 15px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(64,127,154,.35); }
.sa-titulo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.sa-resumo { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 14px; padding: 13px 14px; margin-bottom: 14px; font-size: 13px; }
.sa-resumo small { display: block; color: #6E8790; font-size: 12px; }
.sa-resumo b { font-weight: 700; }
.sa-metodo { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #E1EAED; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.sa-metodo .ic { font-size: 20px; color: #407F9A; }
.sa-metodo span { flex: 1; }
.sa-metodo i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C5D3D7; }
.sa-metodo.on { border-color: #407F9A; }
.sa-metodo.on i { border: 5px solid #407F9A; }
.sa-qr { margin-top: 12px; background: #fff; border-radius: 16px; padding: 16px; text-align: center; }
.sa-qr > svg { width: 128px; height: 128px; fill: #17303A; transition: opacity .3s; }
.sa-qr p { font-size: 13px; color: #6E8790; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sa-qr.pago > svg { opacity: .15; }
.sa-qr.pago p { color: #2E9E6E; font-weight: 700; }
.sa-qr.pago .ic { stroke-width: 2.8; }
.sa-check { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #E1F5EC; color: #2E9E6E; font-size: 40px; margin-bottom: 16px; animation: cp-pop .5s cubic-bezier(.3,1.6,.5,1); }
.sa-check .ic { stroke-width: 2.6; }
.sa-sub { font-size: 13.5px; color: #6E8790; margin: -6px 0 22px; }
.sa-ticket { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; background: #fff; border-radius: 18px; padding: 18px; text-align: left; box-shadow: 0 4px 14px rgba(23,48,58,.07); }
.sa-ticket small { display: block; font-size: 11.5px; color: #8AA0A7; }
.sa-ticket b { font-size: 15px; font-weight: 700; }
.sa-ticket .l { grid-column: 1 / -1; padding-top: 12px; border-top: 1.5px dashed #E1EAED; }
.sa-ticket .l + .l { padding-top: 0; border: 0; }
.sa-ticket .v { color: #2E9E6E; }
.sa-vcel { position: absolute; inset: 0; background: #0F2530; }
.sa-vcel > .sa-pessoa { width: 100%; height: 100%; display: block; }
.sa-eu.p { right: 14px; top: 60px; bottom: auto; width: 86px; height: 120px; }
.sa-ctrl.p { bottom: 30px; }
.sa-notif { position: absolute; left: 12px; right: 12px; top: 56px; display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.96); border-radius: 18px; padding: 12px 14px; font-size: 13px; box-shadow: 0 10px 26px rgba(0,0,0,.25); transform: translateY(-160%); transition: transform .5s cubic-bezier(.3,1.3,.5,1); z-index: 7; }
.sa-notif.on { transform: none; }
.sa-notif > .ic { font-size: 20px; color: #fff; background: #407F9A; width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
.sa-notif b { display: block; font-weight: 700; }
.sa-notif small { color: #6E8790; font-size: 12px; }