/* ═══════════════════════════════════════════════════════════════
   UI/UX Improvements — Anestésica
   Blocos 0–10: loading, toasts, progress bar, validation,
   upload UX, autosave, skeleton, micro-interactions, confirm modal,
   mobile responsiveness.
   Não altera nenhuma lógica de negócio.
   ═══════════════════════════════════════════════════════════════ */

/* ── ETAPA 0 — CSS Custom Properties (alias das variáveis existentes) */
:root {
  --cor-primaria:   var(--blue);   /* #1d3c8a */
  --cor-fundo:      var(--off);    /* #f4f7fd */
  --cor-texto:      var(--td);     /* #0a1628 */
  --cor-secundaria: var(--gold);   /* #c4943a */
  --fonte-principal: var(--sans);  /* 'DM Sans', sans-serif */
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 1 — Loading Overlay (seringa de propofol)
   ══════════════════════════════════════════════════════════════ */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 40, 0.62);
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.syringe-svg {
  width: 156px;
  height: 58px;
  overflow: visible;
  filter: drop-shadow(0 6px 18px rgba(29, 60, 138, 0.35));
}

/* Plunger moves left (aspirating) */
@keyframes syringe-plunger {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-28px); }
}

/* Liquid grows from right toward left (filling) */
@keyframes syringe-liquid {
  0%, 100% { transform: scaleX(0.18); opacity: 0.55; }
  50%       { transform: scaleX(0.88); opacity: 1; }
}

.s-plunger { animation: syringe-plunger 2.6s ease-in-out infinite; }
.s-liq {
  transform-box: fill-box;
  transform-origin: right center;
  animation: syringe-liquid 2.6s ease-in-out infinite;
}

/* Rotating text under syringe */
.loading-text {
  font-family: var(--fonte-principal);
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.06em;
  text-align: center;
  min-height: 1.2em;
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 2 — Toast Notifications (Sonner-inspired)
   ══════════════════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 82px;
  right: 20px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100vw - 40px);
  pointer-events: none;
}

.toast-item {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 4px 28px rgba(10, 22, 40, 0.16), 0 1px 4px rgba(10,22,40,0.08);
  border-left: 4px solid transparent;
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: all;
  font-family: var(--fonte-principal);
  position: relative;
  overflow: hidden;
}

.toast-item.removing {
  animation: toast-out 0.26s ease forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 120px; }
  to   { opacity: 0; transform: translateX(110%); max-height: 0; padding: 0; margin: 0; }
}

.toast-item.success { border-left-color: #16a34a; }
.toast-item.error   { border-left-color: #dc2626; }
.toast-item.warning { border-left-color: #d97706; }
.toast-item.info    { border-left-color: var(--cor-primaria); }

.toast-icon { font-size: 1.05rem; flex-shrink: 0; margin-top: 1px; line-height: 1; }
.toast-body { flex: 1; }
.toast-title { font-size: 0.83rem; font-weight: 600; color: var(--cor-texto); line-height: 1.4; }
.toast-msg   { font-size: 0.78rem; color: var(--tm); line-height: 1.45; margin-top: 2px; }

.toast-close {
  background: none; border: none; cursor: pointer;
  color: var(--tl); font-size: 1.1rem; padding: 0 3px;
  line-height: 1; flex-shrink: 0; opacity: 0.55;
  transition: opacity 0.15s; font-family: inherit;
}
.toast-close:hover { opacity: 1; }

/* Progress strip at bottom */
.toast-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2.5px;
  opacity: 0.28;
  transform-origin: left;
  animation: toast-progress-shrink var(--toast-dur, 4000ms) linear forwards;
}
.toast-item.success .toast-progress { background: #16a34a; }
.toast-item.error   .toast-progress { background: #dc2626; }
.toast-item.warning .toast-progress { background: #d97706; }
.toast-item.info    .toast-progress { background: var(--cor-primaria); }

@keyframes toast-progress-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Toast confirm action buttons */
.toast-actions { display: flex; gap: 8px; margin-top: 9px; }
.toast-btn {
  padding: 5px 14px; border-radius: 7px; border: none;
  cursor: pointer; font-family: var(--fonte-principal);
  font-size: 0.77rem; font-weight: 600; transition: all 0.15s;
}
.toast-btn-confirm { background: var(--cor-primaria); color: #fff; }
.toast-btn-confirm:hover { background: var(--mid); }
.toast-btn-cancel { background: var(--off); color: var(--tm); border: 1.5px solid var(--line); }
.toast-btn-cancel:hover { border-color: var(--gray); }

/* ══════════════════════════════════════════════════════════════
   BLOCO 3 — Barra de progresso das 4 etapas
   ══════════════════════════════════════════════════════════════ */
.pt-progress-wrap {
  margin-bottom: 18px;
}

.pt-progress-bar {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.06);
}

.pt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.pt-step-circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700;
  font-family: var(--fonte-principal);
  transition: all 0.35s ease;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--tl);
}

.pt-step.active .pt-step-circle {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(29, 60, 138, 0.14);
  transform: scale(1.1);
}

.pt-step.done .pt-step-circle {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

.pt-step-label {
  font-size: 0.65rem; font-weight: 600;
  color: var(--tl); text-align: center;
  letter-spacing: 0.03em; white-space: nowrap;
  font-family: var(--fonte-principal);
  transition: color 0.3s;
}
.pt-step.active .pt-step-label { color: var(--cor-primaria); font-weight: 700; }
.pt-step.done   .pt-step-label { color: #16a34a; }

.pt-step-line {
  flex: 1; height: 2px;
  background: var(--line);
  margin: 0 6px;
  align-self: flex-start;
  margin-top: 17px;
  transition: background 0.35s;
  min-width: 16px;
}
.pt-step-line.done { background: #16a34a; }

/* ══════════════════════════════════════════════════════════════
   BLOCO 4 — Validação em tempo real
   ══════════════════════════════════════════════════════════════ */
.field-valid input,
.field-valid select {
  border-color: #16a34a !important;
}
.field-invalid input,
.field-invalid select {
  border-color: #dc2626 !important;
}
.field-valid input:focus,
.field-valid select:focus {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.13) !important;
}
.field-invalid input:focus,
.field-invalid select:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13) !important;
}

.field-feedback {
  display: flex; align-items: center; gap: 4px;
  margin-top: 4px; font-size: 0.71rem;
  font-family: var(--fonte-principal);
  animation: fu 0.2s ease;
  line-height: 1.3;
}
.field-feedback.valid   { color: #16a34a; }
.field-feedback.invalid { color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   BLOCO 5 — Upload de exames melhorado
   ══════════════════════════════════════════════════════════════ */
[id^="excard-"] {
  transition: border-color 0.2s, background 0.2s;
}
[id^="excard-"].dragover {
  border-color: var(--cor-primaria) !important;
  background: rgba(29, 60, 138, 0.04) !important;
  border-style: dashed !important;
}

.upload-progress-wrap {
  margin-top: 8px;
}
.upload-progress-bar {
  height: 4px; background: var(--line);
  border-radius: 2px; overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria));
  border-radius: 2px;
  width: 0%;
  transition: width 0.25s ease;
  animation: upload-pulse 1.6s ease infinite;
}
@keyframes upload-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 6 — Indicador de auto-save
   ══════════════════════════════════════════════════════════════ */
#autosave-indicator {
  position: fixed;
  top: 82px; right: 16px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--fonte-principal);
  font-size: 0.72rem;
  color: var(--tl);
  z-index: 600;
  transition: opacity 0.35s, color 0.25s;
  opacity: 0;
  pointer-events: none;
  background: #fff;
  padding: 5px 10px;
  border-radius: 50px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(10,22,40,0.08);
}
#autosave-indicator.visible { opacity: 1; }
#autosave-indicator.saved   { color: #16a34a; border-color: #bbf7d0; }
#autosave-indicator.saving  { color: var(--tl); }
#autosave-indicator.saveerr { color: #dc2626; border-color: #fecaca; }

@keyframes cloud-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}
#autosave-indicator.saving .as-icon {
  animation: cloud-bob 0.9s ease infinite;
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 7 — Skeleton loading nas listas
   ══════════════════════════════════════════════════════════════ */
.skeleton-list {
  display: flex; flex-direction: column; gap: 10px; padding: 4px 0;
}
.skeleton-card {
  background: #fff;
  border-radius: 10px; padding: 16px 20px;
  border: 1px solid var(--line);
}
.skeleton-line {
  height: 11px; border-radius: 6px;
  background: linear-gradient(90deg, #e6ecf6 25%, #f0f5fb 50%, #e6ecf6 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease infinite;
  margin-bottom: 9px;
}
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.w-65 { width: 65%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-28 { width: 28%; }
.skeleton-header {
  height: 16px; border-radius: 6px; margin-bottom: 12px;
  background: linear-gradient(90deg, #e6ecf6 25%, #f0f5fb 50%, #e6ecf6 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease infinite;
  width: 50%;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 8 — Micro-interações
   ══════════════════════════════════════════════════════════════ */

/* Universal button transitions */
button, .bp, .bo, .bs, .bb, .bfull, .snbtn, .asabtn {
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, opacity 0.18s ease !important;
}

button:active:not(:disabled) { transform: scale(0.96) !important; }
.bp:active:not(:disabled),
.bs:active:not(:disabled),
.bfull:active:not(:disabled),
.bb:active:not(:disabled) { transform: scale(0.96) !important; }

button:disabled,
.bfull:disabled,
.bs:disabled,
.bp:disabled,
.bb:disabled {
  opacity: 0.48 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Primary action hover glow */
.bs:hover:not(:disabled),
.bfull:hover:not(:disabled),
.bp:hover:not(:disabled) {
  box-shadow: 0 4px 18px rgba(29, 60, 138, 0.22) !important;
}

/* Doctor patient-card hover lift */
.dpc {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.dpc:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(10, 22, 40, 0.12) !important;
}

/* General card hover */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s !important; }

/* Input focus ring (enhanced but consistent with existing) */
input:focus, select:focus, textarea:focus {
  border-color: var(--cor-primaria) !important;
  box-shadow: 0 0 0 3px rgba(29, 60, 138, 0.12) !important;
  outline: none;
}

/* Exam card hover */
[id^="excard-"]:hover {
  border-color: var(--bl) !important;
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 9 — Modal de confirmação customizado
   ══════════════════════════════════════════════════════════════ */
#confirm-modal {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, 0.52);
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#confirm-modal.open {
  display: flex;
  animation: cf-fade 0.2s ease;
}
@keyframes cf-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.confirm-dialog {
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 22px;
  max-width: 420px; width: 100%;
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.24);
  animation: cf-scale 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cf-scale {
  from { transform: scale(0.86); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.confirm-icon { font-size: 2rem; margin-bottom: 10px; line-height: 1; }
.confirm-title {
  font-family: var(--serif);
  font-size: 1.12rem; font-weight: 700;
  color: var(--cor-texto); margin-bottom: 8px;
}
.confirm-msg {
  font-size: 0.84rem; color: var(--tm);
  line-height: 1.6; margin-bottom: 22px;
}
.confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end;
}
.confirm-cancel {
  padding: 9px 22px; background: none;
  border: 1.5px solid var(--line); color: var(--tm);
  border-radius: 8px; font-family: var(--fonte-principal);
  font-size: 0.84rem; cursor: pointer; transition: border-color 0.15s;
}
.confirm-cancel:hover { border-color: var(--gray); }
.confirm-ok {
  padding: 9px 22px; background: var(--cor-primaria);
  color: #fff; border: none; border-radius: 8px;
  font-family: var(--fonte-principal); font-size: 0.84rem;
  font-weight: 600; cursor: pointer; transition: all 0.15s;
}
.confirm-ok:hover { background: var(--mid); box-shadow: 0 4px 14px rgba(29,60,138,0.28); }
.confirm-ok.danger { background: #dc2626; }
.confirm-ok.danger:hover { background: #b91c1c; box-shadow: 0 4px 14px rgba(220,38,38,0.28); }

/* ══════════════════════════════════════════════════════════════
   BLOCO 10 — Responsividade mobile aprimorada
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Minimum touch target 44px */
  button, .bp, .bo, .bs, .bb, .bfull, .ncta { min-height: 44px !important; }
  label[style*="cursor:pointer"]:not([for]) { min-height: 44px; display: inline-flex !important; align-items: center; }

  /* Inputs: 16px to prevent iOS zoom + min touch height */
  input, select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=date]),
  select { min-height: 48px; }

  /* Progress bar circles smaller, hide labels */
  .pt-step-label { display: none; }
  .pt-step-circle { width: 28px; height: 28px; font-size: 0.73rem; }
  .pt-progress-bar { padding: 12px 14px; }
  .pt-step-line { min-width: 10px; }

  /* Toast: full width, below nav */
  #toast-container {
    top: 68px; right: 8px; left: 8px;
    max-width: none; width: auto;
  }

  /* Confirm modal */
  .confirm-dialog { padding: 22px 18px 18px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-cancel, .confirm-ok { width: 100%; text-align: center; }

  /* Autosave indicator */
  #autosave-indicator { top: 70px; right: 10px; font-size: 0.68rem; padding: 4px 9px; }

  /* Doctor panel: table rows become card-style */
  .admin-mobile-cards { display: block !important; }
  .admin-mobile-cards thead { display: none !important; }
  .admin-mobile-cards tbody, .admin-mobile-cards tr { display: block !important; }
  .admin-mobile-cards tr {
    border-radius: 9px; border: 1px solid var(--line);
    margin-bottom: 8px; background: #fff; padding: 6px 0;
  }
  .admin-mobile-cards td {
    display: flex !important; padding: 5px 12px !important;
    gap: 8px; align-items: center; font-size: 0.8rem;
  }
  .admin-mobile-cards td:before {
    content: attr(data-label);
    font-size: 0.64rem; font-weight: 700; color: var(--tl);
    text-transform: uppercase; letter-spacing: .06em;
    min-width: 70px; flex-shrink: 0;
  }

  /* Patient form: nav buttons stacked */
  .fnav { flex-wrap: wrap !important; gap: 8px !important; }
  .fnav > button { flex: 1 1 120px; min-width: 120px; }

  /* Auth card more compact */
  .acard { max-width: 100%; }

  /* Loading overlay text smaller */
  .loading-text { font-size: 0.76rem; }

  /* Nav CTA inline-flex */
  .ncta { display: inline-flex !important; align-items: center !important; }
}

@media (max-width: 430px) {
  .pt-step-line { min-width: 6px; margin: 0 3px; }
  .pt-step-circle { width: 26px; height: 26px; font-size: 0.68rem; }
  .hact { flex-direction: column; }
  .hact .bp, .hact .bo { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 12 — Mobile: Tarefas 2–7
   ══════════════════════════════════════════════════════════════ */

/* ── T3: Slots de agendamento — touch targets ─────────────────── */
@media (max-width: 600px) {
  /* Time-slot buttons (presencial & telemedicina) */
  .pres-hrs button,
  #tele-dates-list button,
  #remarcar-slots button {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.88rem !important;
  }
  .pres-dt-btn { min-height: 48px !important; }

  /* Scheduling card */
  #pres-dates-list,
  #tele-dates-list {
    max-height: none;
    overflow-y: visible;
  }
}

/* ── T4: Doctor panel tabs ─────────────────────────────────────── */
.doc-tabs-bar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.doc-tabs-bar::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  .doc-tabs-bar > button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 44px !important;
    font-size: 0.76rem !important;
    padding: 8px 12px !important;
  }

  /* Panel header stacks on mobile (class added to JS) */
  .doc-panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .doc-panel-btns {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .doc-panel-btns > button {
    flex: 1 1 auto;
    min-height: 40px !important;
    font-size: 0.8rem !important;
  }

  /* Filter bars inside fichas/docpre — stack on mobile */
  #ptlist > div:first-child > div:first-child,
  .doc-filter-row { flex-direction: column !important; }
}

/* ── T5: Docpre form grids ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Lab table: horizontal scroll (both docpre and ficha view) */
  .doc-lab-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .doc-lab-wrap > div {
    min-width: 480px; /* ensures columns don't squash below readable size */
  }

  /* Exam results (ECG/Eco/RX/Esf/Outros) cards: 2 cols → 1 col */
  .doc-exams-grid {
    grid-template-columns: 1fr !important;
  }

  /* Physical exam 5-col grid → 2 cols */
  .doc-efisico-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Anesthesiologist assessment 3-col → 1 col */
  .doc-anes-grid {
    grid-template-columns: 1fr !important;
  }

  /* SIM/NÃO row labels: prevent text overflow */
  .snrow { flex-wrap: wrap; }
  .snlbl { flex: 1 1 160px; }
  .snopts { flex-shrink: 0; }
  .snbtn { padding: 8px 12px !important; min-height: 40px !important; }

  /* Score boxes: ensure full width */
  .sbox { width: 100%; }

  /* ASA buttons: allow wrap */
  .asabtn { min-height: 36px; }
}

@media (max-width: 480px) {
  /* Physical exam: tiny screens → 1 col */
  .doc-efisico-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── T6: Institution panel ──────────────────────────────────────── */
@media (max-width: 600px) {
  /* Institution patient list area */
  #instlist { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* CISVER slot picker */
  #cisver-slots-container button {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
}

/* ── T7: Modals on mobile ──────────────────────────────────────── */
@media (max-width: 600px) {
  /* ECG/Exam analysis modal */
  #exame-analise-modal > div {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 14px !important;
  }

  /* Encaminhar modal */
  #encaminhar-modal > div {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
  }

  /* Nova Instituição modal */
  #new-inst-modal > div {
    width: calc(100vw - 32px) !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
  }

  /* Generic: all inline-created modal close buttons get 44px target */
  button[onclick*=".remove()"] {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Exam modal action buttons stack on mobile */
  #exame-analise-modal button,
  #encaminhar-modal button,
  #new-inst-modal button {
    min-height: 44px !important;
  }
}

/* ── Ajuste fino: botões pill de laudo/ECG (compactos, não 44px) ──── */
label.exam-laud-btn {
  min-height: auto !important;
  padding: 5px 10px !important;
  line-height: 1.3 !important;
}

/* ── Textarea do laudo: fonte menor em mobile (densidade > zoom iOS) ─ */
@media (max-width: 768px) {
  textarea.doc-laudo-ta { font-size: 14px !important; }
}

/* ══════════════════════════════════════════════════════════════
   BLOCO 11 — iOS Safari / Android UX Fixes (Tarefa 8)
   ══════════════════════════════════════════════════════════════ */

/* Remover estilo padrão do iOS em selects e buttons */
select { -webkit-appearance: none; appearance: none; }
button, input[type="submit"], input[type="button"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Tap highlight sutil em elementos clicáveis */
button, .bp, .bo, .bs, .bb, .bfull, [class*="btn"],
.snbtn, .asabtn, .mopt, .sbstep, .dpc {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

/* Evitar seleção de texto indesejada em botões */
button, .bp, .bo, .bs, .bb, .bfull, [class*="btn"],
.nav-mobile-menu a, .sbstep {
  -webkit-user-select: none;
  user-select: none;
}

/* Safe area para iPhone X+ (notch + home indicator) */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  nav {
    padding-left: max(5%, env(safe-area-inset-left));
    padding-right: max(5%, env(safe-area-inset-right));
  }
  .nav-mobile-menu {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .fnav {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}