/* ZenCaps | Meu telefone — apresentação isolada dos formulários e do Web Push.
   Não altera cadastro, autorização administrativa nem subscription dos aparelhos. */
@media screen {
  .modal.zen-phone-modal {
    max-width:690px;
    border:1px solid #dbe8de;
    border-radius:18px;
    box-shadow:0 25px 75px rgba(6,25,13,.26);
  }
  .zen-phone-modal .modal-head {
    padding:19px 23px 17px;
    border-bottom:1px solid #e0ebe4;
    background:linear-gradient(110deg,#f7fbf8,#fff 76%);
  }
  .zen-phone-modal .modal-head h2 {
    color:#1a422b;font-size:20px;letter-spacing:-.035em;font-weight:850;
  }
  .zen-phone-modal .modal-head p {font-size:11.5px;line-height:1.55;color:#708777}
  .zen-phone-modal .zen-phone-modal-body {padding:18px 21px;display:grid;gap:14px}
  .zen-phone-overview {display:flex;align-items:center;gap:13px}
  .zen-phone-overview-icon {
    width:48px;height:48px;flex:0 0 48px;
    display:grid;place-items:center;border-radius:14px;
    background:#e6f6ec;color:#13854d;
  }
  .zen-phone-overview-icon svg {width:23px;height:23px}
  .zen-phone-overview h3 {
    color:#1b452e;font-size:16px;letter-spacing:-.025em;
    font-weight:850;line-height:1.35;margin:3px 0 4px;
  }
  .zen-phone-overview p {color:#738879;font-size:11.4px;line-height:1.5;margin:0}
  .zen-phone-eyebrow {
    display:block;font-size:9.5px;line-height:1.45;
    color:#239257;font-weight:850;letter-spacing:.105em;
  }
  .zen-phone-panel {
    padding:16px 17px;border:1px solid #dae9de;
    border-radius:13px;background:linear-gradient(130deg,#fff,#fbfefc);
  }
  .zen-phone-panel-heading {display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .zen-phone-section-icon {
    flex:0 0 35px;width:35px;height:35px;
    display:grid;place-items:center;border-radius:10px;
    color:#158a52;background:#e7f6ec;
  }
  .zen-phone-permission-panel .zen-phone-section-icon {
    color:#507bb0;background:#edf3fe;
  }
  .zen-phone-panel h4,.zen-phone-device-heading h4 {
    color:#214c32;margin:3px 0 0;line-height:1.4;
    font-size:12.7px;font-weight:850;letter-spacing:-.015em;
  }
  .zen-phone-modal .zen-phone-contact-panel .field label {
    color:#42644b;font-size:11px;font-weight:850;
  }
  .zen-phone-modal .zen-phone-contact-panel .field input {
    margin-top:1px;width:100%;min-height:42px;
    border:1px solid #d6e6db;border-radius:10px;
    background:#fff;color:#2c523a;font-size:12px;
  }
  .zen-phone-modal .zen-phone-contact-panel .field small {
    margin-top:3px;font-size:10.8px;line-height:1.58;
    color:#728779;
  }
  .zen-phone-modal .zen-phone-contact-panel input:focus-visible {
    outline:2px solid #169752;outline-offset:2px;
  }
  .zen-phone-permission-status {
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:10px;
    font-size:11.5px;line-height:1.45;font-weight:800;
    background:#eaf8ef;border:1px solid #cce8d6;color:#1a7042;
  }
  .zen-phone-permission-status-icon {
    width:27px;height:27px;flex:0 0 27px;
    display:grid;place-items:center;
    border-radius:9px;background:#d3f0de;color:#15874c;
  }
  .zen-phone-permission-status.is-restricted {
    background:#fff7ed;border-color:#f0dfbe;color:#885f1d;
  }
  .zen-phone-permission-status.is-restricted .zen-phone-permission-status-icon {
    background:#ffebcd;color:#976b20;
  }
  .zen-phone-permission-status.is-loading {
    color:#5f7488;background:#f0f5fa;border-color:#dae5ec;
  }
  .zen-phone-permission-status.is-loading .zen-phone-permission-status-icon {
    color:#5a7d9d;background:#e1edf5;
  }
  .zen-phone-modal .zen-phone-info {
    margin:10px 0 0;color:#6e8675;
    font-size:10.9px;line-height:1.55;
  }
  .zen-phone-device-section {
    padding:15px 17px 16px;
    border:1px solid #dbe9e0;border-radius:13px;
    background:#fff;
  }
  .zen-phone-device-heading {margin-bottom:12px}
  .zen-phone-modal .zen-mobile-alert-settings {
    border-radius:11px;border:1px solid #d8eadd;
    padding:14px;background:#f7fbf8;gap:11px;
  }
  .zen-phone-modal .zen-mobile-alert-heading {gap:11px}
  .zen-phone-modal .zen-mobile-alert-heading img {
    width:40px;height:40px;border-radius:11px;
  }
  .zen-phone-modal .zen-mobile-alert-heading strong {
    color:#245238;font-size:12.5px;font-weight:850;
  }
  .zen-phone-modal .zen-mobile-alert-heading small {
    color:#558261;font-size:10.8px;line-height:1.5;margin-top:3px;
  }
  .zen-phone-modal .zen-mobile-alert-settings p {
    color:#627d6a;font-size:11px;line-height:1.62;
  }
  .zen-phone-modal .zen-mobile-alert-settings .zen-mobile-alert-footnote {
    color:#6c8373;font-size:10.4px;line-height:1.55;
  }
  .zen-phone-modal .zen-mobile-alert-actions {gap:8px}
  .zen-phone-modal .zen-mobile-alert-actions .btn {
    border-radius:9px;min-height:37px;
    font-size:10.8px;font-weight:850;
  }
  .zen-phone-device-unavailable {
    margin:0;background:#f4f8f5;color:#6b8171;
    border:1px solid #dce9df;border-radius:10px;
    padding:12px;font-size:11px;line-height:1.5;
  }
  .zen-phone-modal .zen-password-feedback {
    margin:0;min-height:0;line-height:1.5;font-size:11px;
    color:#256b44;
  }
  .zen-phone-modal .zen-password-feedback:empty {display:none}
  .zen-phone-modal .modal-foot {
    padding:13px 21px;gap:9px;
    border-top:1px solid #e0ebe4;background:#fbfefc;
  }
  .zen-phone-modal .modal-foot .btn {
    min-height:39px;padding:10px 14px;
    border-radius:10px;font-size:11px;font-weight:850;
  }
  .zen-phone-modal .modal-foot .btn.primary {
    background:#079b50;border-color:#079b50;
    box-shadow:0 5px 12px rgba(11,145,74,.11);
  }
  .zen-phone-modal .modal-foot .btn:focus-visible,
  .zen-phone-modal .zen-mobile-alert-actions .btn:focus-visible {
    outline:2px solid #159b58;outline-offset:2px;
  }
  @media(max-width:640px) {
    .modal.zen-phone-modal {max-height:94dvh;border-radius:16px}
    .zen-phone-modal .modal-head {padding:15px 15px 13px}
    .zen-phone-modal .zen-phone-modal-body {padding:14px 13px;gap:11px}
    .zen-phone-panel,.zen-phone-device-section {padding:13px}
    .zen-phone-overview-icon {width:41px;height:41px;flex-basis:41px}
    .zen-phone-overview h3 {font-size:14.5px}
    .zen-phone-modal .modal-foot {padding:12px 13px}
    .zen-phone-modal .modal-foot .btn {flex:1 1 130px}
  }
/* Manter a janela contida na tela. Conteúdo rola sem esconder o rodapé. */
.modal.zen-phone-modal{min-height:0;max-height:min(90dvh,900px)}
.zen-phone-modal>form{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.zen-phone-modal .zen-phone-modal-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:thin;scrollbar-color:#97bea3 transparent;
  scrollbar-gutter:stable;
  padding-bottom:36px;
  scroll-padding-bottom:36px;
}
.zen-phone-modal .zen-phone-modal-body::-webkit-scrollbar{width:8px}
.zen-phone-modal .zen-phone-modal-body::-webkit-scrollbar-thumb{
  border-radius:8px;background:#a5c9b0;border:2px solid transparent;
  background-clip:padding-box;
}
.zen-phone-modal .zen-phone-device-section{min-width:0}
.zen-phone-modal .modal-head,.zen-phone-modal .modal-foot{
  flex:0 0 auto;
}
.zen-phone-modal .modal-foot{position:relative;z-index:1}
@media(max-width:640px){
  .modal.zen-phone-modal{max-height:94dvh}
  .zen-phone-modal .zen-phone-modal-body{
    padding-bottom:30px;scroll-padding-bottom:30px;
  }
}
  @media(prefers-reduced-motion:reduce) {
    .zen-phone-modal .btn {transition:none}
  }
  html[data-theme="dark"] .zen-phone-modal {
    background:#1b3023;border-color:#395e45;
  }
  html[data-theme="dark"] .zen-phone-modal .modal-head,
  html[data-theme="dark"] .zen-phone-modal .modal-foot {
    background:linear-gradient(110deg,#20392a,#1b3023);
    border-color:#3e5c47;
  }
  html[data-theme="dark"] .zen-phone-modal .modal-head h2,
  html[data-theme="dark"] .zen-phone-overview h3,
  html[data-theme="dark"] .zen-phone-panel h4,
  html[data-theme="dark"] .zen-phone-device-heading h4 {color:#e8f5ec}
  html[data-theme="dark"] .zen-phone-modal .modal-head p,
  html[data-theme="dark"] .zen-phone-overview p {color:#c0d4c6}
  html[data-theme="dark"] .zen-phone-eyebrow {color:#93dfb2}
  html[data-theme="dark"] .zen-phone-overview-icon,
  html[data-theme="dark"] .zen-phone-section-icon {
    color:#b8eccc;background:#28503a;
  }
  html[data-theme="dark"] .zen-phone-permission-panel .zen-phone-section-icon {
    color:#c8dff8;background:#294862;
  }
  html[data-theme="dark"] .zen-phone-panel,
  html[data-theme="dark"] .zen-phone-device-section {
    background:#21382a;border-color:#42624b;
  }
  html[data-theme="dark"] .zen-phone-modal .zen-phone-contact-panel .field label {color:#c3dec9}
  html[data-theme="dark"] .zen-phone-modal .zen-phone-contact-panel .field input {
    color:#e5f4e9;background:#284332;border-color:#4c7055;
  }
  html[data-theme="dark"] .zen-phone-modal .zen-phone-contact-panel .field small,
  html[data-theme="dark"] .zen-phone-modal .zen-phone-info {color:#c0d5c5}
  html[data-theme="dark"] .zen-phone-permission-status.is-authorized {
    background:#234b33;border-color:#417c56;color:#d2f3dd;
  }
  html[data-theme="dark"] .zen-phone-permission-status.is-restricted {
    background:#4a3c27;border-color:#7d653d;color:#f0d9a8;
  }
  html[data-theme="dark"] .zen-phone-permission-status.is-loading {
    background:#2d4352;border-color:#506678;color:#dce9f3;
  }
  html[data-theme="dark"] .zen-phone-modal .zen-mobile-alert-settings {
    background:#25402f;border-color:#416a4d;
  }
  html[data-theme="dark"] .zen-phone-modal .zen-mobile-alert-heading strong {color:#ebf7ee}
  html[data-theme="dark"] .zen-phone-modal .zen-mobile-alert-heading small {color:#a6ddba}
  html[data-theme="dark"] .zen-phone-modal .zen-mobile-alert-settings p,
  html[data-theme="dark"] .zen-phone-modal .zen-mobile-alert-settings .zen-mobile-alert-footnote {
    color:#c8dece;
  }
  html[data-theme="dark"] .zen-phone-modal .zen-phone-device-unavailable {
    background:#284230;border-color:#4a6a54;color:#c2d5c7;
  }
}
