/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */:root {
      --green-900: #0a2e1f;
      --green-800: #0f4c35;
      --green-700: #136042;
      --green-600: #1a7a53;
      --green-500: #219664;
      --green-400: #2db87a;
      --green-100: #d4f0e4;
      --green-50: #edf8f3;

      --blue-700: #0e3a6e;
      --blue-500: #1a5fad;
      --blue-100: #d4e4f7;

      --red-700: #8b1a0e;
      --red-500: #c0390b;
      --red-100: #fde4dd;

      --amber-500: #d97706;
      --amber-100: #fef3c7;

      --neutral-950: #0a0d0f;
      --neutral-900: #111518;
      --neutral-800: #1c2229;
      --neutral-700: #28323d;
      --neutral-600: #374454;
      --neutral-500: #4d6070;
      --neutral-400: #6b7c8d;
      --neutral-300: #94a3b0;
      --neutral-200: #c8d3da;
      --neutral-100: #e4eaef;
      --neutral-50: #f2f5f8;
      --neutral-0: #ffffff;

      --bg: #f0f5f2;
      --surface: #ffffff;
      --surface2: #f2f6f4;
      --border: #d6e4dd;
      --accent: var(--green-600);
      --accent-dk: var(--green-800);
      --accent-lt: var(--green-50);
      --accent2: var(--blue-500);
      --warn: var(--red-500);
      --text: var(--neutral-900);
      --text2: var(--neutral-500);
      --text3: var(--neutral-300);

      --font-body: 'DM Sans', system-ui, sans-serif;
      --font-disp: 'DM Serif Display', Georgia, serif;

      --fs-2xs: 11px;
      --fs-xs: 13px;
      --fs-sm: 15px;
      --fs-md: 16px;
      --fs-lg: 18px;
      --fs-xl: 22px;
      --fs-2xl: 28px;
      --fs-3xl: 36px;

      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 20px;
      --r-2xl: 24px;

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .04);
      --shadow-lg: 0 10px 30px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);

      --nav-h: 64px;
      /* altura da bottom nav */

      /* ── Novos tokens de touch target ── */
      --touch-min: 44px;   /* mínimo recomendado iOS/Android */
      --touch-md: 48px;
      --touch-lg: 56px;

      /* ── Gradientes de marca ── */
      --grad-brand: linear-gradient(135deg, var(--green-800) 0%, var(--green-600) 100%);
      --grad-emg: linear-gradient(135deg, #991b1b 0%, #dc2626 100%);

      /* ── Glassmorphism ── */
      --glass-bg: rgba(255,255,255,0.88);
      --glass-border: rgba(255,255,255,0.6);

      /* ── FAB (botão flutuante) ── */
      --fab-size: 56px;
      --fab-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 20px);
    }

    /* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */*,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }html,
    body {
      height: 100%;
      overscroll-behavior: none;
    }body {
      font-family: var(--font-body);
      font-size: var(--fs-md);
      background: var(--bg);
      color: var(--text);
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    /* ══════════════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════════════ */#loading-screen {
      position: fixed;
      inset: 0;
      background: var(--green-800);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      gap: 16px;
      transition: opacity .4s ease;
    }#loading-screen.fade-out {
      opacity: 0;
      pointer-events: none;
    }.loading-icon {
      width: 72px;
      height: 72px;
      border-radius: 18px;
    }.loading-title {
      font-family: var(--font-disp);
      font-size: var(--fs-2xl);
      color: #fff;
      letter-spacing: -.5px;
    }.loading-title span {
      color: var(--green-400);
    }.loading-bar {
      width: 120px;
      height: 3px;
      background: rgba(255, 255, 255, .2);
      border-radius: 99px;
      overflow: hidden;
    }.loading-bar-fill {
      height: 100%;
      width: 0;
      background: var(--green-400);
      border-radius: 99px;
      animation: loadbar 1.2s ease forwards;
    }@keyframes loadbar {
      to {
        width: 100%;
      }
    }

    /* ══════════════════════════════════════════════
   LAYOUT PRINCIPAL — app-shell
══════════════════════════════════════════════ */#app-shell {
      display: flex;
      flex-direction: column;
      height: 100vh;
      height: 100dvh;
      max-width: 480px;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }

    /* ── Área de conteúdo ── */#app-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      position: relative;
    }

    /* ══════════════════════════════════════════════
   BOTTOM NAVIGATION (Design Redesign Premium)
══════════════════════════════════════════════ */
    #bottom-nav {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(24px) saturate(190%);
      -webkit-backdrop-filter: blur(24px) saturate(190%);
      border-top: 1px solid rgba(15, 76, 53, 0.08);
      height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 6px);
      padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 6px);
      flex-shrink: 0;
      position: relative;
      z-index: 100;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05), 0 -1px 2px rgba(0, 0, 0, 0.03);
    }

    .nav-tab {
      flex: 1;
      max-width: 96px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 6px 4px 6px;
      border-radius: var(--r-md);
      position: relative;
      transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.18s;
      color: var(--neutral-400);
      -webkit-tap-highlight-color: transparent;
    }

    .nav-tab:active {
      transform: scale(0.92);
    }

    .nav-tab-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 30px;
      border-radius: 18px;
      background: var(--neutral-50);
      border: 1px solid var(--border);
      transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-tab svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.2s;
    }

    .nav-tab-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
      line-height: 1;
      transition: color 0.2s, font-weight 0.2s;
    }

    /* --- Estado Ativo Geral (Paciente/Histórico) --- */
    .nav-tab.active {
      color: var(--green-800);
    }

    .nav-tab.active .nav-tab-icon {
      background: var(--green-100);
      box-shadow: 0 2px 8px rgba(15, 76, 53, 0.14);
    }

    .nav-tab.active svg {
      transform: scale(1.08);
      stroke-width: 2.3px;
    }

    .nav-tab.active .nav-tab-label {
      font-weight: 800;
      color: var(--green-900);
    }

    .nav-tab.new-tab-btn,
    .nav-tab.save-tab-btn,
    .nav-tab.nav-action-tab {
      color: var(--neutral-500);
    }

    .nav-tab.new-tab-btn .nav-tab-icon,
    .nav-tab.save-tab-btn .nav-tab-icon,
    .nav-tab.nav-action-tab .nav-tab-icon {
      background: var(--neutral-50);
      border: 1px solid var(--border);
    }

    .nav-tab.new-tab-btn:active .nav-tab-icon,
    .nav-tab.save-tab-btn:active .nav-tab-icon,
    .nav-tab.nav-action-tab:active .nav-tab-icon {
      background: var(--green-600);
      border-color: var(--green-600);
      box-shadow: 0 4px 14px rgba(26, 122, 83, .3);
    }

    .nav-tab.new-tab-btn:active svg,
    .nav-tab.save-tab-btn:active svg,
    .nav-tab.nav-action-tab:active svg {
      stroke: #fff;
    }

    /* --- Botão Emergência (Destaque alerta vermelho) --- */
    .nav-tab.emg-tab-btn {
      color: #dc2626;
    }

    .nav-tab.emg-tab-btn .nav-tab-icon {
      background: rgba(220, 38, 38, 0.08);
    }

    .nav-tab.emg-tab-btn.active {
      color: #b91c1c;
    }

    .nav-tab.emg-tab-btn.active .nav-tab-icon {
      background: #fee2e2;
      box-shadow: 0 2px 10px rgba(220, 38, 38, 0.22);
    }

    .nav-tab.emg-tab-btn.active .nav-tab-label {
      color: #991b1b;
      font-weight: 800;
    }

    /* ══════════════════════════════════════════════
   SCREENS (páginas dentro do app-content)
══════════════════════════════════════════════ */.screen {
      display: none;
      min-height: 100%;
      padding-bottom: 24px;
      animation: screenIn .22s cubic-bezier(.22,1,.36,1);
    }.screen.active {
      display: block;
    }@keyframes screenIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ══════════════════════════════════════════════
   TOPBAR (screens secundárias)
══════════════════════════════════════════════ */.topbar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      position: sticky;
      top: 0;
      z-index: 50;
      background: var(--glass-bg);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }.topbar-back {
      min-width: var(--touch-min);
      min-height: var(--touch-min);
      width: 44px;
      height: 44px;
      border-radius: var(--r-md);
      border: none;
      background: var(--surface);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      color: var(--text);
      flex-shrink: 0;
      transition: background .15s, transform .1s;
    }.topbar-back:active {
      background: var(--border);
      transform: scale(.93);
    }.topbar-title {
      font-family: var(--font-disp);
      font-size: var(--fs-xl);
      color: var(--text);
      flex: 1;
    }.topbar-badge {
      background: var(--accent);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 99px;
    }

    /* ══════════════════════════════════════════════
   PATIENT BANNER STICKY
══════════════════════════════════════════════ */.pbs-wrap {
      position: sticky;
      top: 57px;
      z-index: 40;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      padding: 6px 12px;
    }.pbs-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-top: 6px;
    }.pbs-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 14px;
      border-radius: var(--r-md);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: all .15s;
      flex-shrink: 0;
      min-height: 40px;
      height: 40px;
      line-height: 1.2;
      white-space: nowrap;
    }

    #screen-meds .pbs-actions {
      display: flex;
      align-items: center;
      width: 100%;
      gap: 8px;
      margin-top: 8px;
      padding: 0;
    }

    #screen-meds .pbs-btn {
      min-height: 46px;
      height: 46px;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.01em;
      box-shadow: 0 2px 8px rgba(15, 76, 53, 0.12);
      flex: 1 1 0;
      min-width: 0;
    }

    #screen-meds .pbs-btn--primary {
      background: var(--green-600);
      color: #fff;
    }

    #screen-meds .pbs-btn--secondary {
      background: #0284c7;
      color: #fff;
    }

    #screen-meds .sel-bar {
      flex: 1 1 auto;
      margin-left: 0;
      gap: 6px;
      min-width: 0;
      display: flex;
      align-items: center;
    }

    #screen-meds .sel-bar-clear {
      flex: 1;
      justify-content: center;
      min-width: 0;
      padding: 10px 12px;
      min-height: 46px;
      height: 46px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 800;
      background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
      border: 1.5px solid rgba(220, 38, 38, 0.22);
      color: var(--red-700);
      box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
    }

    #screen-meds .sel-bar-clear:active {
      background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    }

    .pbs-btn-back {      background: var(--neutral-50);
      border: 1.5px solid var(--border) !important;
      color: var(--text2);
    }.pbs-btn-back:active {
      background: var(--border);
    }.pbs-btn-save {
      background: var(--green-800);
      color: #fff;
      margin-left: auto;
    }.pbs-btn-save:active {
      background: var(--green-900);
    }

    /* ══════════════════════════════════════════════
   PAT BANNER (dentro do pbs-wrap e nas screens)
══════════════════════════════════════════════ */.pat-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-left: 4px solid var(--accent);
      border-radius: var(--r-lg);
      padding: 9px 12px;
      box-shadow: var(--shadow-sm);
    }.pat-banner-esp {
      font-size: 20px;
      flex-shrink: 0;
    }.pat-banner-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }.pat-banner-nome {
      font-weight: 700;
      font-size: var(--fs-md);
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }.pat-banner-detail {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-top: 1px;
    }.pat-banner-params {
      font-size: 12px;
      color: var(--text3);
      margin-top: 2px;
      line-height: 1.4;
    }.pat-banner-empty {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--amber-100);
      border: 1.5px solid #fcd34d;
      border-radius: var(--r-lg);
      padding: 9px 12px;
      font-size: var(--fs-sm);
      color: var(--amber-500);
      font-weight: 600;
    }

    /* vital colors */.pat-input.vital-low {
      background: var(--blue-100) !important;
      border-color: #93c5fd !important;
      color: var(--blue-700) !important;
    }.pat-input.vital-high {
      background: var(--red-100) !important;
      border-color: #fca5a5 !important;
      color: var(--red-700) !important;
    }.pat-input.vital-normal {
      background: var(--green-50) !important;
      border-color: var(--green-100) !important;
      color: var(--green-700) !important;
    }

    /* ══════════════════════════════════════════════
   HOME — TAB 1: PACIENTE
══════════════════════════════════════════════ */.home-header {
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 16px 22px;
      background: var(--grad-brand);
      color: #fff;
      border-radius: 0 0 var(--r-2xl) var(--r-2xl);
      box-shadow: 0 8px 24px rgba(10, 46, 31, .18);
    }.home-logo {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    }.home-title {
      font-family: var(--font-disp);
      font-size: 22px;
      color: #fff;
      letter-spacing: -.3px;
      line-height: 1;
    }.home-title span {
      color: var(--green-400);
    }.home-sub {
      font-size: 11px;
      color: rgba(255, 255, 255, .6);
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-top: 2px;
    }.home-dev {
      font-size: 11px;
      color: rgba(255, 255, 255, .4);
      margin-top: 2px;
    }.home-dev span {
      color: var(--green-400);
      font-weight: 600;
      cursor: pointer;
    }

    /* Patient card */.patient-card {
      background: var(--surface);
      margin: -14px 12px 0;
      position: relative;
      z-index: 2;
      border-radius: var(--r-xl);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
    }.patient-card-label {
      font-size: 10px;
      font-weight: 800;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 10px 14px 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }.patient-card-label::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 12px;
      background: var(--accent);
      border-radius: 2px;
    }.patient-card-body {
      padding: 0 12px 12px;
    }

    /* Espécie buttons */.esp-row {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }.esp-btn {
      flex: 1;
      padding: 11px 8px;
      min-height: var(--touch-min);
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--neutral-50);
      color: var(--text2);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }.esp-btn.active {
      border-color: var(--accent);
      background: var(--grad-brand);
      color: #fff;
      box-shadow: 0 3px 10px rgba(15, 76, 53, .28);
    }

    /* Fields grid */.pat-fields {
      display: flex;
      gap: 8px;
    }.pat-field {
      flex: 1;
    }.pat-field-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 4px;
    }.pat-input {
      width: 100%;
      background: var(--neutral-50);
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      padding: 12px 14px;
      min-height: var(--touch-min);
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 500;
      outline: none;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }.pat-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26, 122, 83, .12);
      background: #fff;
    }.pat-input.filled {
      border-color: var(--accent);
    }

    /* Vitals separator */.vitals-divider {
      height: 1px;
      background: var(--border);
      margin: 10px 0 10px;
    }

    /* Vitals grid 2x2 + FR full */.vitals-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }



    .care-context {
      margin: 0 12px 12px;
      padding: 12px;
      border: 1px solid #cce6da;
      border-radius: var(--r-md);
      background: linear-gradient(135deg, #f0fdf7, #f8fffb);
    }.care-context-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
    .care-context-title { display:block; font-size:12px; font-weight:800; color:var(--green-800); text-transform:uppercase; letter-spacing:.7px; }
    .care-context-help { display:block; margin-top:3px; font-size:11px; line-height:1.35; color:var(--text2); }
    .care-status { flex-shrink:0; padding:4px 8px; border-radius:999px; background:#d1fae5; color:#065f46; font-size:10px; font-weight:800; }
    .care-status.inpatient { background:#e0e7ff; color:#3730a3; }
    .care-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; padding:4px; border-radius:var(--r-md); background:#e6f4ed; }
    .care-mode { min-height:38px; border:0; border-radius:8px; background:transparent; color:var(--text2); font:700 12px var(--font-body); cursor:pointer; }
    .care-mode.active { background:#fff; color:var(--green-800); box-shadow:0 1px 4px rgba(15,76,53,.16); }
    .care-mode.active#care-mode-internacao { color:#3730a3; }
    .care-inpatient-fields { margin-top:10px; }
    .care-bed-field { display:block; font-size:11px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.6px; }
    .care-bed-field .pat-input { margin-top:5px; }
    .care-episode-note { margin:7px 0 0; font-size:11px; line-height:1.35; color:#475569; }

    /* ── FAB — Botão Flutuante Salvar ── */
    .fab-save {
      position: fixed;
      bottom: var(--fab-bottom);
      right: 20px;
      width: var(--fab-size);
      height: var(--fab-size);
      border-radius: 50%;
      border: none;
      background: var(--grad-brand);
      color: #fff;
      box-shadow: 0 4px 16px rgba(15,76,53,.45), 0 2px 6px rgba(0,0,0,.2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 90;
      transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
      animation: fabIn .35s cubic-bezier(.22,1,.36,1);
    }
    .fab-save:active {
      transform: scale(.88);
      box-shadow: 0 2px 8px rgba(15,76,53,.3);
    }
    .fab-save svg {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
    }
    @keyframes fabIn {
      from { transform: scale(0) rotate(-45deg); opacity:0; }
      to   { transform: scale(1) rotate(0deg);   opacity:1; }
    }

    /* ══════════════════════════════════════════════
   HOME — TAB 2: FERRAMENTAS (quick-menu)
══════════════════════════════════════════════ */#tab-tools {
      padding: 0 12px 24px;
    }.tools-section-label {
      font-size: 10px;
      font-weight: 800;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      padding: 16px 0 8px;
    }

    /* Grid 2 colunas para as ferramentas */.tools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }.tool-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 16px 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: var(--shadow-sm);
      transition: all .18s;
      position: relative;
      overflow: hidden;
      text-align: left;
      border: none;
      width: 100%;
    }.tool-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      transition: background .15s;
    }.tool-card:active::after {
      background: rgba(0, 0, 0, .05);
    }.tool-card:active {
      transform: scale(.98);
    }.tool-card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }.tool-card-title {
      font-weight: 700;
      font-size: var(--fs-sm);
      color: var(--text);
      line-height: 1.2;
    }.tool-card-desc {
      font-size: 11px;
      color: var(--text2);
      line-height: 1.4;
    }

    /* Card de editor de medicamentos ocupa full width */.tool-card-meds-editor {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      min-height: 88px;
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
      border: 1.5px solid #7dd3fc !important;
    }.tool-card-meds-editor .tool-card-icon {
      background: #0284c7;
      color: #fff;
      flex-shrink: 0;
    }.tool-card-meds-editor .tool-card-title {
      color: #075985;
    }.tool-card-meds-editor .tool-card-desc {
      color: #0369a1;
    }

    /* Card de emergência segue o padrão da grade */.tool-card-emg {
      background: linear-gradient(135deg, #fef2f2, #fee2e2);
      border: 1.5px solid #fca5a5 !important;
    }.tool-card-emg .tool-card-icon {
      background: #dc2626;
      color: #fff;
      flex-shrink: 0;
    }.tool-card-emg .tool-card-title {
      color: #991b1b;
    }.tool-card-emg .tool-card-desc {
      color: #b91c1c;
    }

    /* Card de eutanásia segue o padrão da grade */.tool-card-eut {
      background: linear-gradient(135deg, #faf5ff, #f3e8ff);
      border: 1.5px solid #d8b4fe !important;
    }.tool-card-eut .tool-card-icon {
      background: #7c3aed;
      color: #fff;
      flex-shrink: 0;
    }.tool-card-eut .tool-card-title {
      color: #581c87;
    }.tool-card-eut .tool-card-desc {
      color: #7e22ce;
    }

    /* ── Eutanásia screen: passos e cards ── */
    .eut-step-label {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin: 18px 0 8px;
    }
    .eut-step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #7c3aed;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .eut-cards-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .eut-drug-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px 16px;
      position: relative;
      box-shadow: var(--shadow-sm);
    }
    .eut-drug-name {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 2px;
    }
    .eut-drug-conc {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
      margin-bottom: 8px;
    }
    .eut-drug-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .eut-drug-dose-block {
      background: #f3e8ff;
      border: 1px solid #e9d5ff;
      border-radius: var(--r-md);
      padding: 8px 14px;
      text-align: center;
      min-width: 100px;
    }
    .eut-drug-dose-val {
      font-size: 20px;
      font-weight: 800;
      color: #6b21a8;
      font-family: var(--font-disp);
      line-height: 1;
    }
    .eut-drug-dose-unit {
      font-size: 15px;
      color: #7e22ce;
      font-weight: 700;
      margin-top: 3px;
    }
    .eut-drug-via {
      font-size: var(--fs-xs);
      color: #6b21a8;
      font-weight: 700;
      background: #f3e8ff;
      border: 1px solid #e9d5ff;
      border-radius: var(--r-sm);
      padding: 5px 10px;
    }
    .eut-drug-alert {
      margin-top: 8px;
      font-size: var(--fs-xs);
      color: var(--amber-500);
      background: var(--amber-100);
      border: 1px solid #fcd34d;
      border-radius: var(--r-sm);
      padding: 6px 10px;
      font-weight: 600;
    }

    /* ══════════════════════════════════════════════
   CARDS GENÉRICOS
══════════════════════════════════════════════ */.card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px 16px;
      margin: 8px 12px 0;
      box-shadow: var(--shadow-sm);
    }.card-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
    }

    /* ══════════════════════════════════════════════
   SCREENS INTERNAS (FC, DOSE, MEDS, EXAMES)
   — padding lateral e topo do conteúdo
══════════════════════════════════════════════ */.screen-inner {
      padding: 8px 12px 24px;
    }

    /* ══════════════════════════════════════════════
   FC/FR — preservar estilos existentes
══════════════════════════════════════════════ */.seg-control {
      display: flex;
      gap: 6px;
      margin: 8px 12px 0;
    }.seg-btn {
      flex: 1;
      padding: 10px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--text2);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }.seg-btn.active {
      border-color: var(--accent);
      background: var(--green-50);
      color: var(--accent);
    }.timer-card {
      background: linear-gradient(135deg, var(--green-800), var(--green-900));
      border-radius: var(--r-2xl);
      padding: 24px;
      margin: 8px 12px 0;
      text-align: center;
      color: #fff;
    }.timer-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: .6;
      margin-bottom: 8px;
    }.timer-value {
      font-family: var(--font-disp);
      font-size: 48px;
      letter-spacing: -2px;
      line-height: 1;
    }.timer-unit {
      font-size: 11px;
      opacity: .5;
      margin-top: 4px;
    }.timer-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 12px;
      font-size: 13px;
      opacity: .8;
    }.dot-live {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .3);
    }.dot-live.running {
      background: #4ade80;
      box-shadow: 0 0 0 3px rgba(74, 222, 128, .3);
      animation: pulse 1s infinite;
    }@keyframes pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }
    }.dot-live.stopped {
      background: rgba(255, 255, 255, .3);
    }.btn-row {
      display: flex;
      gap: 8px;
      margin: 8px 12px 0;
    }.btn-start {
      flex: 1;
      padding: 14px;
      border: none;
      border-radius: var(--r-lg);
      background: var(--green-800);
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background .15s;
    }.btn-start:active {
      background: var(--green-900);
    }.btn-start.running {
      background: #dc2626;
    }.btn-reset {
      width: 50px;
      height: 50px;
      border-radius: var(--r-lg);
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s;
    }.btn-reset:active {
      background: var(--border);
    }

    /* FC result */.result-box {
      background: var(--green-50);
      border: 1.5px solid var(--green-100);
      border-radius: var(--r-lg);
      padding: 16px;
      text-align: center;
      margin-top: 10px;
    }.result-value {
      font-family: var(--font-disp);
      font-size: var(--fs-3xl);
      color: var(--green-700);
      line-height: 1;
    }.result-unit {
      font-size: var(--fs-sm);
      color: var(--text2);
      margin-top: 4px;
    }.input-group {
      margin-bottom: 12px;
    }.input-label {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
      margin-bottom: 5px;
      display: block;
    }.input-field {
      width: 100%;
      background: var(--neutral-50);
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      padding: 12px 14px;
      min-height: var(--touch-min);
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--fs-md);
      outline: none;
      transition: border-color .18s, box-shadow .18s;
    }.input-field:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26, 122, 83, .12);
      background: #fff;
    }.calc-result {
      background: var(--green-50);
      border: 1.5px solid var(--green-100);
      border-radius: var(--r-lg);
      padding: 16px;
      text-align: center;
      margin-top: 10px;
    }.main-val {
      font-family: var(--font-disp);
      font-size: var(--fs-3xl);
      color: var(--green-700);
      line-height: 1;
    }.sub-info {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-top: 8px;
    }.conc-hint {
      font-size: 11px;
      color: var(--text3);
      margin-top: 4px;
    }.formula-line {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 5px 0;
      font-size: var(--fs-sm);
      color: var(--text2);
    }.hl {
      color: var(--accent);
      font-weight: 600;
    }.hl2 {
      color: var(--blue-500);
      font-weight: 700;
    }

    /* Ref table */.ref-table-wrap {
      border-radius: var(--r-md);
      overflow: hidden;
      border: 1px solid var(--border);
    }.ref-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-bottom: 1px solid var(--border);
      font-size: var(--fs-sm);
    }.ref-row:last-child {
      border-bottom: none;
    }.ref-row-animal {
      font-weight: 600;
      color: var(--text);
    }.ref-row-range {
      color: var(--text2);
      font-size: var(--fs-xs);
    }

    /* FC interpretation */#fc-interp {
      margin-top: 8px;
    }

    /* ══════════════════════════════════════════════
   MEDS SCREEN
═══════════════════════════════ */.search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      padding: 10px 14px;
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
      transition: border-color .18s, box-shadow .18s;
    }.search-box:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26, 122, 83, .1);
    }.search-icon {
      color: var(--text3);
      flex-shrink: 0;
    }.search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      color: var(--text);
    }.search-input::placeholder {
      color: var(--text3);
    }.search-clear-btn {
      background: transparent;
      border: none;
      color: var(--text3);
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s, color .15s;
    }.search-clear-btn:hover, .search-clear-btn:active {
      color: var(--text);
      background: var(--neutral-100);
    }

    /* Container fixo de busca + filtros */.meds-search-container {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--bg);
      padding: 0 16px 10px;
      margin: 0 -16px;
      padding-top: 10px;
    }.filter-scroll {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 10px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }.filter-scroll::-webkit-scrollbar {
      display: none;
    }.filter-chip {
      flex-shrink: 0;
      padding: 6px 13px;
      border: 1.5px solid var(--border);
      border-radius: 99px;
      background: var(--surface);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      white-space: nowrap;
      transition: all .15s;
    }.filter-chip.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(26, 122, 83, .3);
    }

    /* Container rolável da lista */.med-list-container {
      padding: 0 16px;
      margin: 0 -16px;
      overflow-y: auto;
      flex: 1;
    }.med-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-bottom: 20px;
    }.med-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px 16px;
      cursor: pointer;
      transition: all .18s;
      display: flex;
      gap: 12px;
      box-shadow: var(--shadow-sm);
      position: relative;
    }.med-card:active {
      transform: scale(.99);
      border-color: var(--accent);
    }.med-card.selected {
      border-color: var(--accent);
      background: var(--green-50);
      box-shadow: 0 0 0 3px rgba(26, 122, 83, .1);
    }.med-cb {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 1.5px solid var(--border);
      background: var(--neutral-50);
      flex-shrink: 0;
      margin-top: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #fff;
      transition: all .15s;
    }.med-cb.on {
      background: var(--accent);
      border-color: var(--accent);
    }.med-body {
      flex: 1;
      min-width: 0;
    }.med-name {
      font-weight: 700;
      font-size: var(--fs-md);
      color: var(--text);
      margin-bottom: 2px;
    }.med-comercial {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-bottom: 3px;
      line-height: 1.35;
      font-style: italic;
    }.med-comercial-icon {
      font-style: normal;
      font-size: 11px;
      margin-right: 3px;
      opacity: 0.85;
    }.med-classe {
      font-size: var(--fs-xs);
      color: var(--accent2);
      font-weight: 600;
      margin-bottom: 6px;
    }.med-indicacao {
      font-size: var(--fs-xs);
      color: var(--text2);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8px;
    }.med-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }.tag {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: var(--fs-2xs);
      font-weight: 700;
      max-width: 100%;
    }.tag-dose {
      background: var(--green-50);
      color: var(--green-700);
    }.tag-conc {
      background: var(--blue-100);
      color: var(--blue-700);
    }.tag-via {
      background: transparent;
      border: none;
      color: var(--red-700);
      padding: 0;
      border-radius: 0;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.25;
      text-align: left;
      display: block;
      width: 100%;
      margin-top: 2px;
    }.med-adjusted-dose {
      margin-top: 8px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      background: linear-gradient(135deg, #fff7ed, #ffedd5);
      border: 1px solid #fdba74;
      border-radius: 12px;
      padding: 7px 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(154, 77, 0, .08);
    }.med-adjusted-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 7px;
      border-radius: 999px;
      background: #f59e0b;
      font-size: 9px;
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      box-shadow: 0 1px 2px rgba(245, 158, 11, .3);
    }.med-adjusted-value {
      font-size: 14px;
      line-height: 1.3;
      font-weight: 900;
      color: #9a4d00;
      letter-spacing: .02em;
    }

    .med-card.selected .med-adjusted-dose {
      padding: 8px 12px;
      transform: translateY(-1px);
    }

    .med-card.selected .med-adjusted-label {
      font-size: 9px;
      padding: 4px 8px;
    }

    .med-card.selected .med-adjusted-value {
      font-size: 15px;
      letter-spacing: 0.02em;
    }.no-results {      text-align: center;      padding: 40px 20px;      color: var(--text3);      font-size: var(--fs-md);    }.no-results-icon {      font-size: 36px;      display: block;
      margin-bottom: 8px;
    }

    /* ═══════════════════════════════
   SEL BAR
═══════════════════════════════ */.sel-bar {
      padding: 0 4px;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      min-width: 0;
    }.sel-bar.hidden {
      display: none;

    }.sel-bar-clear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--surface);
      color: var(--text2);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      height: 34px;
    }.sel-bar-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border: none;
      border-radius: var(--r-md);
      background: var(--green-500);
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      height: 34px;
    }

    /* ═══════════════════════════════
   MED DETAIL MODAL
═══════════════════════════════ */.modal-overlay {
      display: none;
      position: fixed;
      inset: 0 0 var(--nav-h) 0;
      z-index: 300;
      background: rgba(0, 0, 0, .5);
      align-items: flex-end;
      justify-content: center;
    }.modal-overlay.open {
      display: flex;
    }.modal {
      background: var(--surface);
      border-radius: var(--r-2xl) var(--r-2xl) 0 0;
      padding: 0 0 40px;
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      overflow-y: auto;
      animation: slideUp .25s ease;
    }.modal-handle {
      width: 40px;
      height: 4px;
      background: var(--neutral-200);
      border-radius: 99px;
      margin: 12px auto 18px;
    }.modal-inner {
      padding: 0 20px;
    }.modal-med-name {
      font-family: var(--font-disp);
      font-size: var(--fs-xl);
      color: var(--text);
      margin-bottom: 4px;
    }.modal-classe {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--accent2);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 16px;
    }.modal-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid var(--neutral-100);
    }.modal-row:last-child {
      border-bottom: none;
    }.modal-row-label {
      font-size: var(--fs-sm);
      color: var(--text2);
      font-weight: 600;
      flex-shrink: 0;
      padding-right: 12px;
      min-width: 80px;
    }.modal-row-val {
      font-size: var(--fs-sm);
      color: var(--text);
      text-align: right;
      max-width: 65%;
      line-height: 1.6;
      font-weight: 500;
    }.modal-alert {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      background: var(--red-100);
      border: 1px solid #fca59a;
      border-radius: var(--r-md);
      padding: 10px 12px;
      margin-bottom: 8px;
      font-size: var(--fs-sm);
      color: var(--red-700);
      font-weight: 600;
      line-height: 1.5;
    }.btn-calc {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: var(--r-lg);
      background: var(--accent);
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
      margin-top: 16px;
      box-shadow: 0 4px 14px rgba(26, 122, 83, .3);
      transition: all .15s;
    }.btn-calc:active {
      transform: scale(.98);
    }

    /* ═══════════════════════════════
   DOSE ADJUST MODAL (step2)
═══════════════════════════════ */.peso-overlay {
      display: none;
      position: fixed;
      inset: 0 0 var(--nav-h) 0;
      z-index: 300;
      background: rgba(0, 0, 0, .5);
      align-items: flex-start;
      justify-content: center;
      padding-top: 28px;
    }.peso-overlay.open {
      display: flex;
    }.peso-sheet {
      background: var(--surface);
      border-radius: 0 0 var(--r-2xl) var(--r-2xl);
      width: 100%;
      max-width: 480px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      animation: slideDown .25s ease;
      overflow: hidden;
    }#step1,
    #step2 {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }.psheet-handle {
      width: 40px;
      height: 4px;
      background: var(--neutral-200);
      border-radius: 99px;
      margin: 12px auto 0;
      flex-shrink: 0;
    }.psheet-header {
      padding: 12px 20px 12px;
      border-bottom: 1px solid var(--neutral-100);
      flex-shrink: 0;
    }.psheet-header-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 2px;
    }.psheet-title {
      font-family: var(--font-disp);
      font-size: var(--fs-xl);
      color: var(--text);
      flex: 1;
    }.psheet-sub {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
    }.psheet-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px 20px;
      min-height: 0;
    }.psheet-footer {
      padding: 10px 20px;
      border-top: 1px solid var(--neutral-100);
      display: flex;
      gap: 10px;
      flex-shrink: 0;
      background: var(--surface);
    }

    /* Step1 fields */.psheet-esp-row {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }.psheet-esp-btn {
      flex: 1;
      padding: 8px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--neutral-50);
      color: var(--text2);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all .18s;
    }.psheet-esp-btn.active {
      border-color: var(--accent);
      background: var(--green-50);
      color: var(--accent);
    }.psheet-field-label {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .8px;
      margin-bottom: 5px;
    }.psheet-input {
      width: 100%;
      background: var(--neutral-50);
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      padding: 11px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--fs-lg);
      font-weight: 600;
      outline: none;
      transition: all .18s;
      margin-bottom: 10px;
    }.psheet-input:focus {
      border-color: var(--accent);
      background: #fff;
    }.psheet-peso {
      font-size: var(--fs-2xl);
      font-weight: 700;
      text-align: center;
      margin-bottom: 0;
    }.btn-psheet-ok {
      flex: 1;
      padding: 13px;
      border: none;
      border-radius: var(--r-lg);
      background: var(--accent);
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
      box-shadow: 0 4px 12px rgba(26, 122, 83, .3);
    }.btn-psheet-cancel {
      padding: 13px 18px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--surface);
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
    }

    /* DA cards (dose adjust) */.da-card {
      background: var(--neutral-50);
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      padding: 14px 16px;
      margin-bottom: 10px;
    }.da-card.blocked {
      background: #fff5f4;
      border-color: #fca59a;
    }.da-name {
      font-weight: 700;
      font-size: var(--fs-md);
      color: var(--text);
      margin-bottom: 2px;
    }.da-class {
      font-size: var(--fs-xs);
      color: var(--accent2);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 10px;
    }.da-conc-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }.da-conc-label {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text2);
      white-space: nowrap;
    }.da-conc-input {
      flex: 1;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 6px 10px;
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 700;
      color: var(--text);
      outline: none;
      min-width: 0;
      transition: border-color .18s;
    }.da-conc-input:focus {
      border-color: var(--accent2);
    }.da-conc-unit {
      font-size: var(--fs-2xs);
      color: var(--text3);
      font-weight: 600;
      white-space: nowrap;
    }.da-range {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
      margin-bottom: 8px;
    }.da-range span {
      color: var(--accent);
      font-weight: 700;
    }.da-dose-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }.da-dose-label {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text2);
      white-space: nowrap;
    }.da-dose-input {
      flex: 1;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 8px 12px;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      outline: none;
      min-width: 0;
      transition: border-color .18s, background-color .18s;
      text-align: center;
    }.da-dose-input:focus {
      border-color: var(--accent2);
    }.da-dose-input.invalid {
      background: #ffe5e5;
      border-color: var(--red-500);
    }.da-dose-unit {
      font-size: var(--fs-2xs);
      color: var(--text3);
      font-weight: 600;
      white-space: nowrap;
    }.da-preview {
      background: linear-gradient(135deg, #fff7ed, #ffedd5);
      border: 1px solid #fdba74;
      border-radius: var(--r-sm);
      padding: 9px 12px;
      font-size: 1.08rem;
      line-height: 1.3;
      color: #9a4d00;
      font-weight: 900;
      letter-spacing: .02em;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(154, 77, 0, .08);
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }.da-preview-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 3px 8px;
      border-radius: 999px;
      background: #f59e0b;
      color: #fff;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1.5;
      box-shadow: 0 1px 2px rgba(245, 158, 11, .3);
    }.da-preview::before {
      content: '✓';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #f59e0b;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      flex-shrink: 0;
    }.da-blocked-msg {
      color: var(--red-500);
      font-weight: 700;
      font-size: var(--fs-sm);
    }

    /* ═══════════════════════════════
   RESULT OVERLAY
═══════════════════════════════ */.result-overlay {
      display: none;
      position: fixed;
      inset: 0 0 var(--nav-h) 0;
      z-index: 300;
      background: rgba(0, 0, 0, .5);
      align-items: flex-end;
      justify-content: center;
    }.result-overlay.open {
      display: flex;
    }.result-sheet {
      background: var(--surface);
      border-radius: var(--r-2xl) var(--r-2xl) 0 0;
      padding: 0 0 40px;
      width: 100%;
      max-width: 480px;
      max-height: 88vh;
      overflow-y: auto;
      animation: slideUp .25s ease;
    }.result-inner {
      padding: 0 20px;
    }.result-title {
      font-family: var(--font-disp);
      font-size: var(--fs-xl);
      color: var(--text);
      margin-bottom: 4px;
    }.result-sub {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
      margin-bottom: 18px;
    }

    /* Result table */.result-tbl {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 18px;
    }.result-tbl th {
      background: var(--green-800);
      color: #fff;
      padding: 10px 12px;
      font-size: var(--fs-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      text-align: left;
    }.result-tbl th:first-child {
      border-radius: var(--r-sm) 0 0 0;
    }.result-tbl th:last-child {
      border-radius: 0 var(--r-sm) 0 0;
      text-align: center;
    }.result-tbl td {
      padding: 12px;
      border-bottom: 1px solid var(--neutral-100);
      vertical-align: top;
    }.result-tbl tr:last-child td {
      border-bottom: none;
    }.rt-name {
      font-weight: 700;
      color: var(--text);
      font-size: var(--fs-sm);
    }.rt-class {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-top: 2px;
    }.rt-dose {
      font-weight: 800;
      color: var(--accent);
      font-size: var(--fs-md);
    }.rt-dose-sub {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-top: 2px;
    }.rt-via {
      display: inline-block;
      padding: 0;
      border-radius: 0;
      border: none;
      font-size: var(--fs-xs);
      font-weight: 700;
      background: transparent;
      color: var(--red-700);
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      line-height: 1.3;
      max-width: 100%;
      text-align: center;
    }

    /* Buttons wapp / close */.btn-wapp {
      width: 100%;
      padding: 16px;
      border: none;
      border-radius: var(--r-lg);
      background: #25D366;
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
      margin-bottom: 10px;
      box-shadow: 0 4px 14px rgba(37, 211, 102, .3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all .15s;
    }.btn-wapp:active {
      transform: scale(.98);
    }.btn-close-result {
      width: 100%;
      padding: 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--surface);
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
    }

    /* ═══════════════════════════════
   EMERGÊNCIA / RCP
═══════════════════════════════ */

    /* Tabs */

    /* Protocolo */.proto-num.p1 {
      background: #dc2626;
    }.proto-num.p2 {
      background: #ea580c;
    }.proto-num.p3 {
      background: #d97706;
    }.proto-num.p4 {
      background: #16a34a;
    }

    /* Metrônomo */.metro-card {
      background: #0f172a;
      border-radius: var(--r-xl);
      padding: 20px;
      margin-bottom: 12px;
      text-align: center;
    }.metro-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 6px;
    }.metro-bpm {
      font-family: var(--font-disp);
      font-size: 56px;
      color: #f8fafc;
      line-height: 1;
      letter-spacing: -2px;
      margin-bottom: 4px;
    }.metro-unit {
      font-size: var(--fs-xs);
      color: rgba(255, 255, 255, .4);
      margin-bottom: 16px;
    }.metro-beat {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #dc2626;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: transform .05s ease;
      box-shadow: 0 0 0 0 rgba(220, 38, 38, .4);
    }.metro-beat.pulse {
      animation: metroPulse .1s ease;
      box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }@keyframes metroPulse {
      0% {
        transform: scale(1.3);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 16px rgba(220, 38, 38, 0);
      }
    }.metro-btn-row {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 14px;
    }.metro-adj {
      width: 44px;
      height: 44px;
      border-radius: var(--r-md);
      border: 1.5px solid rgba(255, 255, 255, .15);
      background: rgba(255, 255, 255, .08);
      color: #fff;
      font-family: var(--font-body);
      font-size: 22px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }.metro-start {
      flex: 1;
      padding: 13px;
      border: none;
      border-radius: var(--r-lg);
      background: #dc2626;
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }.metro-start.running {
      background: #16a34a;
    }.metro-preset-row {
      display: flex;
      gap: 6px;
    }.metro-preset {
      flex: 1;
      padding: 8px;
      border: 1.5px solid rgba(255, 255, 255, .15);
      border-radius: var(--r-md);
      background: transparent;
      color: rgba(255, 255, 255, .7);
      font-family: var(--font-body);
      font-size: var(--fs-xs);
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }.metro-preset.active-p {
      border-color: #dc2626;
      color: #dc2626;
      background: rgba(220, 38, 38, .1);
    }

    /* Drug timer */.drug-timer-card {
      background: linear-gradient(135deg, #1e1b4b, #312e81);
      border-radius: var(--r-xl);
      padding: 20px;
      margin-bottom: 12px;
      text-align: center;
    }.dt-label {
      font-size: var(--fs-2xs);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 6px;
    }.dt-value {
      font-family: var(--font-disp);
      font-size: 52px;
      color: #fff;
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 4px;
    }.dt-value.warning {
      color: #fbbf24;
    }.dt-value.urgent {
      color: #ef4444;
      animation: dtBlink .5s infinite;
    }@keyframes dtBlink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }.dt-sub {
      font-size: var(--fs-xs);
      color: rgba(255, 255, 255, .45);
      margin-bottom: 16px;
    }.dt-progress {
      height: 6px;
      border-radius: 99px;
      background: rgba(255, 255, 255, .1);
      overflow: hidden;
      margin-bottom: 16px;
    }.dt-progress-fill {
      height: 100%;
      border-radius: 99px;
      background: #818cf8;
      transition: width .5s linear, background .5s;
    }.dt-progress-fill.warning {
      background: #fbbf24;
    }.dt-progress-fill.urgent {
      background: #ef4444;
    }.dt-btn-row {
      display: flex;
      gap: 8px;
    }.dt-btn {
      flex: 1;
      padding: 13px;
      border: none;
      border-radius: var(--r-lg);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }.dt-btn.primary {
      background: #4f46e5;
      color: #fff;
    }.dt-btn.primary.running {
      background: #dc2626;
    }.dt-btn.secondary {
      background: rgba(255, 255, 255, .1);
      color: rgba(255, 255, 255, .8);
      border: 1px solid rgba(255, 255, 255, .15);
    }.dt-cycle-info {
      background: rgba(255, 255, 255, .06);
      border-radius: var(--r-md);
      padding: 10px 14px;
      margin-bottom: 10px;
      font-size: var(--fs-xs);
      color: rgba(255, 255, 255, .6);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }.dt-cycle-count {
      font-size: var(--fs-xl);
      font-weight: 800;
      color: #818cf8;
    }

    /* Materiais */.mat-section {
      margin-bottom: 14px;
    }.mat-section-title {
      font-size: var(--fs-xs);
      font-weight: 700;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }.mat-section-title::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 12px;
      background: #dc2626;
      border-radius: 2px;
    }.mat-item.checked {
      border-color: var(--accent);
      background: var(--green-50);
    }.mat-cb {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      flex-shrink: 0;
      border: 1.5px solid var(--border);
      background: var(--neutral-50);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #fff;
      transition: all .15s;
    }.mat-cb.on {
      background: var(--accent);
      border-color: var(--accent);
    }.mat-text {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
      flex: 1;
    }.mat-text.checked {
      color: var(--accent);
      text-decoration: line-through;
      opacity: .7;
    }.mat-badge {
      font-size: var(--fs-2xs);
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 99px;
      flex-shrink: 0;
    }.mat-progress-fill {
      height: 100%;
      background: var(--accent);
      border-radius: 99px;
      transition: width .3s;
    }

    /* ═══════════════════════════════
   IMPRESSÃO
═══════════════════════════════ */

    /* ═══════════════════════════════
   EXAMES LABORATORIAIS
═══════════════════════════════ */.exam-cat-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }

    /* Componente individual de exame */.exam-causes {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 500;
      opacity: .9;
    }.exam-causes li {
      margin-left: 14px;
      list-style: disc;
      margin-bottom: 2px;
    }

    /* ═══════════════════════════════
   KEYFRAMES
═══════════════════════════════ */@keyframes slideUp {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }@keyframes slideDown {
      from {
        transform: translateY(-100%);
      }

      to {
        transform: translateY(0);
      }
    }@keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ═══════════════════════════════
   MISC
═══════════════════════════════ */.badge-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--accent);
      color: #fff;
      font-size: var(--fs-xs);
      font-weight: 700;
      border-radius: 99px;
      padding: 2px 9px;
      margin-left: 6px;
      font-family: var(--font-body);
    }EXAMES ══════════════════════════════════════════════ */ .exam-cat-grid {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 8px 12px 0;
    }.exam-cat-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px 16px;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all .15s;
      text-align: left;
      width: 100%;
    }.exam-cat-btn:active {
      transform: scale(.99);
      border-color: var(--accent);
    }.exam-cat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }.exam-cat-info {
      flex: 1;
      min-width: 0;
    }.exam-cat-title {
      font-weight: 700;
      font-size: var(--fs-md);
      color: var(--text);
    }.exam-cat-desc {
      font-size: 11px;
      color: var(--text2);
      margin-top: 2px;
    }.menu-arrow {
      font-size: 20px;
      color: var(--text3);
    }.exam-item {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      padding: 12px 14px;
      margin-bottom: 8px;
      box-shadow: var(--shadow-sm);
    }.exam-item-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px;
    }.exam-item-name {
      font-weight: 700;
      font-size: var(--fs-sm);
      color: var(--text);
    }.exam-item-ref {
      font-size: 11px;
      color: var(--text3);
    }.exam-input-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }.exam-input {
      flex: 1;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      padding: 8px 10px;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      background: var(--neutral-50);
      color: var(--text);
      outline: none;
      transition: border-color .18s;
    }.exam-input:focus {
      border-color: var(--accent);
      background: #fff;
    }.exam-unit {
      font-size: var(--fs-xs);
      color: var(--text2);
      font-weight: 600;
      flex-shrink: 0;
      min-width: 40px;
    }.exam-result {
      margin-top: 8px;
      font-size: var(--fs-xs);
      display: none;
    }.exam-result.low {
      color: var(--blue-700);
      background: var(--blue-100);
      border-radius: var(--r-sm);
      padding: 6px 10px;
    }.exam-result.high {
      color: var(--red-700);
      background: var(--red-100);
      border-radius: var(--r-sm);
      padding: 6px 10px;
    }.exam-result.normal {
      color: var(--green-700);
      background: var(--green-50);
      border-radius: var(--r-sm);
      padding: 6px 10px;
    }

    /* ══════════════════════════════════════════════
   EMERGÊNCIA / RCP
══════════════════════════════════════════════ */.emg-tabs {
      display: flex;
      background: var(--surface);
      border-bottom: 2px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 45;
    }.emg-tab {
      flex: 1;
      padding: 12px 4px;
      min-height: var(--touch-min);
      border: none;
      background: transparent;
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      transition: all .15s;
    }.emg-tab.active {
      color: #dc2626;
      border-bottom-color: #dc2626;
    }.emg-header {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fef2f2;
      border: 1.5px solid #fecaca;
      border-radius: var(--r-xl);
      padding: 14px;
      margin: 8px 12px 0;
    }.emg-header-icon {
      font-size: 28px;
    }.emg-header-title {
      font-weight: 800;
      font-size: var(--fs-lg);
      color: #991b1b;
    }.emg-header-sub {
      font-size: var(--fs-xs);
      color: #b91c1c;
      margin-top: 2px;
    }

    /* materiais / checklist */.mat-progress-label {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-bottom: 6px;
      font-weight: 600;
    }.mat-progress {
      height: 6px;
      background: var(--border);
      border-radius: 99px;
      overflow: hidden;
    }.mat-progress-fil {
      height: 100%;
      background: var(--green-400);
      border-radius: 99px;
      transition: width .3s;
    }.mat-list {
      margin-top: 10px;
    }.mat-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }.mat-item:last-child {
      border-bottom: none;
    }.mat-check {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 2px solid var(--border);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      transition: all .15s;
      background: var(--neutral-50);
    }.mat-item.done .mat-check {
      background: var(--green-400);
      border-color: var(--green-400);
      color: #fff;
    }.mat-label {
      font-size: var(--fs-sm);
      color: var(--text);
      line-height: 1.3;
    }.mat-item.done .mat-label {
      text-decoration: line-through;
      color: var(--text3);
    }.mat-reset {
      margin-top: 10px;
      font-size: var(--fs-xs);
      color: var(--text2);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      font-family: var(--font-body);
    }

    .rcp-metro-btn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: var(--r-lg);
      background: #dc2626;
      color: #fff;
      font-family: var(--font-body);
      font-size: var(--fs-md);
      font-weight: 800;
      cursor: pointer;
      letter-spacing: .5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
    }.rcp-running-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .15);
      flex-shrink: 0;
    }

    /* RCP patient banner */.rcp-pat-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fef2f2;
      border: 1.5px solid #fecaca;
      border-radius: var(--r-lg);
      padding: 10px 14px;
      margin: 8px 12px 0;
    }

    /* drogas RCP */.rcp-drug-label {
      font-size: 11px;
      font-weight: 800;
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    /* proto */.proto-step {
      display: flex;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
    }.proto-step:last-child {
      border-bottom: none;
    }.proto-num {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
    }.p1 {
      background: #fee2e2;
      color: #dc2626;
    }.p2 {
      background: var(--amber-100);
      color: var(--amber-500);
    }.p3 {
      background: var(--green-50);
      color: var(--green-700);
    }.p4 {
      background: var(--neutral-100);
      color: var(--text2);
    }.proto-body {
      flex: 1;
    }.proto-title {
      font-weight: 700;
      font-size: var(--fs-sm);
      color: var(--text);
    }.proto-desc {
      font-size: var(--fs-xs);
      color: var(--text2);
      margin-top: 3px;
      line-height: 1.5;
    }.proto-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 99px;
      margin-top: 5px;
    }.proto-badge.red {
      background: #fee2e2;
      color: #dc2626;
    }.proto-badge.amber {
      background: var(--amber-100);
      color: var(--amber-500);
    }.proto-badge.green {
      background: var(--green-50);
      color: var(--green-700);
    }.proto-badge.purple {
      background: #ede9fe;
      color: #7c3aed;
    }

/* ══════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════ */
@media print {
  #bottom-nav,
  .topbar,
  .topbar-back,
  .modal-handle,
  .pbs-actions,
  .pbs-wrap,
  #loading-screen,
  #peso-overlay,
  #relatorio-overlay,
  #hist-overlay,
  #ajuda-overlay,
  #vk-toast,
  #app-content > .screen {
    display: none !important;
  }

  body {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    color: #111 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  }

  #app-content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.print-protocolo #result-overlay {
    display: block !important;
    position: static !important;
    inset: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px !important;
    margin: 0 !important;
    width: 100% !important;
    max-height: none !important;
  }

  body.print-protocolo #result-overlay .result-sheet {
    display: block !important;
    position: static !important;
    transform: none !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.print-protocolo .result-inner {
    padding: 0 !important;
  }

  body.print-protocolo .result-title {
    color: #0f766e !important;
    font-size: 18pt !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
  }

  body.print-protocolo .result-sub {
    color: #4b5563 !important;
    font-size: 10pt !important;
    margin-bottom: 12px !important;
  }

  body.print-protocolo #result-params {
    color: #374151 !important;
    font-size: 9.5pt !important;
    margin-bottom: 14px !important;
  }

  body.print-protocolo .result-tbl {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }

  body.print-protocolo .result-tbl th {
    background: #0f766e !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 8px 10px !important;
    font-size: 9.5pt !important;
    border: 1px solid #0f766e !important;
  }

  body.print-protocolo .result-tbl td {
    padding: 8px 10px !important;
    border: 1px solid #e5e7eb !important;
    color: #111 !important;
  }

  body.print-protocolo .rt-name {
    color: #111 !important;
    font-size: 10.5pt !important;
    font-weight: 700 !important;
  }

  body.print-protocolo .rt-class {
    color: #6b7280 !important;
    font-size: 8.5pt !important;
  }

  body.print-protocolo .rt-dose {
    color: #0f766e !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
  }

  body.print-protocolo .rt-dose-sub {
    color: #4b5563 !important;
    font-size: 8.5pt !important;
  }

  body.print-protocolo .rt-via {
    color: #b91c1c !important;
    font-size: 9pt !important;
    font-weight: 700 !important;
  }

  #print-footer {
    display: block !important;
    text-align: center !important;
    font-size: 8.5pt !important;
    color: #6b7280 !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 10px !important;
    margin-top: 20px !important;
  }
}

    /* ══════════════════════════════════════════════
   BANCO DE DADOS — HISTÓRICO
══════════════════════════════════════════════ */#vk-toast {
      position: fixed;
      bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 80px);
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      max-width: 320px;
      width: calc(100% - 32px);
      padding: 12px 18px 12px 14px;
      border-radius: var(--r-lg);
      color: #fff;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 600;
      z-index: 9990;
      opacity: 0;
      transition: opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
      pointer-events: none;
      line-height: 1.4;
      text-align: left;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--neutral-900);
    }#vk-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }#vk-toast.toast-ok {
      background: #14532d;
      border-left: 4px solid var(--green-400);
    }#vk-toast.toast-warn {
      background: #78350f;
      border-left: 4px solid #fbbf24;
    }#vk-toast.toast-error {
      background: #7f1d1d;
      border-left: 4px solid #ef4444;
    }#vk-toast.toast-info {
      background: var(--blue-700);
      border-left: 4px solid #60a5fa;
    }#hist-overlay {
      display: none;
      position: fixed;
      inset: 0 0 var(--nav-h) 0;
      z-index: 9600;
      background: rgba(0, 0, 0, .55);
      align-items: flex-end;
      justify-content: center;
    }#hist-sheet {
      background: var(--bg);
      border-radius: var(--r-2xl) var(--r-2xl) 0 0;
      width: 100%;
      max-width: 480px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      animation: slideUpFade .25s ease;
      overflow: hidden;
    }@keyframes slideUpFade {
      from {
        transform: translateY(30px);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }#hist-header {
      background: var(--surface);
      padding: 6px 16px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    /* ── Filtros do Histórico ── */
    .hist-filter-toggle-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--green-800);
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: var(--r-md);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all .15s;
    }
    .hist-filter-toggle-btn:active {
      transform: scale(.95);
    }
    .hist-filter-toggle-btn.active {
      background: var(--green-800);
      color: #fff;
      border-color: var(--green-800);
    }

    .hist-search-input {
      width: 100%;
      padding: 8px 30px 8px 12px;
      border-radius: var(--r-md);
      border: 1px solid var(--border);
      background: var(--surface2);
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text);
      box-sizing: border-box;
      transition: border-color .15s, box-shadow .15s;
    }
    .hist-search-input:focus {
      outline: none;
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26, 122, 83, 0.12);
    }

    .hist-search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: var(--neutral-300);
      color: var(--neutral-800);
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 10px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      padding: 0;
    }
    .hist-search-clear:hover {
      background: var(--neutral-400);
      color: #fff;
    }

    .hist-code-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 800;
      font-family: monospace, monospace;
      background: var(--green-50);
      color: var(--green-800);
      padding: 2px 6px;
      border-radius: 6px;
      border: 1px solid var(--green-100);
      margin-left: 6px;
      letter-spacing: 0.4px;
      vertical-align: middle;
    }

    #hist-lista {
      overflow-y: auto;
      flex: 1;
      padding: 12px 14px 30px;
    }.hist-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--r-xl);
      padding: 14px;
      margin-bottom: 10px;
      box-shadow: var(--shadow-sm);
      transition: opacity .2s, transform .2s;
    }.hist-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }.hist-card-nome {
      font-weight: 700;
      font-size: 16px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }.hist-card-meta {
      font-size: 12px;
      color: var(--text2);
      margin-top: 2px;
    }.hist-card-data {
      font-size: 11px;
      color: var(--text3);
      white-space: nowrap;
      text-align: right;
      line-height: 1.4;
    }.hist-btn-del {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--neutral-50);
      color: var(--text3);
      font-size: 13px;
      cursor: pointer;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }.hist-btn-del:active {
      background: var(--red-100);
      color: var(--red-700);
      border-color: var(--red-100);
    }.hist-card-vitais {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.8;
      margin-bottom: 8px;
      padding: 8px 10px;
      background: var(--neutral-50);
      border-radius: var(--r-sm);
    }.hist-card-secao {
      margin-top: 8px;
    }.hist-card-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .7px;
      padding: 2px 8px;
      border-radius: 99px;
      margin-bottom: 4px;
    }.hist-card-tag.exam {
      background: #ede9fe;
      color: #7c3aed;
    }.hist-card-tag.med {
      background: var(--blue-100);
      color: var(--blue-700);
    }.hist-card-tag.obs {
      background: var(--green-50);
      color: var(--green-700);
    }.hist-card-text {
      font-size: 12px;
      color: var(--text2);
      line-height: 1.6;
    }.hist-btn-carregar {
      width: 100%;
      margin-top: 12px;
      padding: 9px;
      border: 1.5px solid var(--accent);
      border-radius: var(--r-md);
      background: var(--green-50);
      color: var(--accent);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all .15s;
    }.hist-btn-carregar:active {
      background: var(--accent);
      color: #fff;
    }

    /* pbs-wrap rem. CSS */
    /* pat-banner-actions removido */

    /* ══════════════════════════════════════════════
   EDITOR DE MEDICAMENTOS — formulário
══════════════════════════════════════════════ */.edit-label {
      display: block;
      font-weight: 700;
      font-size: var(--fs-xs);
      color: var(--text2);
      text-transform: uppercase;
      letter-spacing: .6px;
      margin-bottom: 5px;
    }.edit-input {
      width: 100%;
      padding: 9px 11px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      color: var(--text);
      background: var(--neutral-50);
      outline: none;
      transition: border-color .18s, box-shadow .18s;
      box-sizing: border-box;
    }.edit-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(26, 122, 83, .1);
      background: #fff;
    }.edit-section {
      background: var(--neutral-50);
      border: 1.5px solid var(--border);
      border-radius: var(--r-lg);
      padding: 14px;
      margin-bottom: 14px;
    }.edit-section.cao {
      background: var(--green-50);
      border-color: var(--accent);
    }.edit-section.gato {
      background: #fef3f4;
      border-color: #fca5a5;
    }.edit-section-title {
      font-weight: 700;
      font-size: var(--fs-sm);
      margin: 0 0 12px;
    }.edit-grid3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }.edit-field {
      margin-bottom: 10px;
    }.edit-field:last-child {
      margin-bottom: 0;
    }

    /* ══════════════════════════════════════════════
   MODAL OVERLAY GENÉRICO (OBS, EASTER EGG)
══════════════════════════════════════════════ */.overlay-generic {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9500;
      background: rgba(0, 0, 0, .55);
      align-items: flex-end;
      justify-content: center;
    }



    /* ══════════════════════════════════════════════
   HISTÓRICO — melhorias de hierarquia
══════════════════════════════════════════════ */
    .hist-primary-action {
      width: 100%;
      height: 46px;
      border: none;
      border-radius: var(--r-lg);
      background: #059669;
      color: #fff;
      font-size: var(--fs-sm);
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      transition: background .15s;
      box-shadow: 0 2px 8px rgba(5,150,105,.3);
    }
    .hist-primary-action:active { background: #047857; }

    .hist-secondary-actions {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      margin-top: 8px;
    }
    .hist-sec-btn {
      height: 40px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--neutral-50);
      color: var(--text2);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: var(--font-body);
      font-weight: 600;
      transition: background .15s;
    }
    .hist-sec-btn:active { background: var(--neutral-100); }
    .hist-sec-btn.danger:active {
      background: var(--red-100);
      color: var(--red-700);
      border-color: #fca5a5;
    }
    .hist-select-all-btn {
      height: 40px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-md);
      background: var(--neutral-50);
      color: var(--text2);
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-family: var(--font-body);
      font-weight: 600;
      width: 100%;
      margin-top: 6px;
      transition: background .15s;
    }
    .hist-select-all-btn:active { background: var(--neutral-100); }

/* ══════════════════════════════════════════════
   UTILITY CLASSES — substituem inline styles
   repetidos no HTML
══════════════════════════════════════════════ */

/* Flexbox helpers */
.flex-row       { display:flex; align-items:center; }
.flex-col       { display:flex; flex-direction:column; }
.flex-center    { display:flex; align-items:center; justify-content:center; }
.flex-between   { display:flex; align-items:center; justify-content:space-between; }
.flex-1         { flex:1; }
.flex-shrink-0  { flex-shrink:0; }
.min-w-0        { min-width:0; }
.gap-6          { gap:6px; }
.gap-8          { gap:8px; }
.gap-10         { gap:10px; }
.gap-12         { gap:12px; }

/* Spacing */
.mt-4           { margin-top:4px; }
.mt-6           { margin-top:6px; }
.mt-8           { margin-top:8px; }
.mt-10          { margin-top:10px; }
.mb-8           { margin-bottom:8px; }
.mb-10          { margin-bottom:10px; }
.p-0            { padding:0; }

/* Text */
.text-xs        { font-size:var(--fs-xs); }
.text-sm        { font-size:var(--fs-sm); }
.text-2xs       { font-size:var(--fs-2xs); }
.text-muted     { color:var(--text2); }
.text-faint     { color:var(--text3); }
.text-accent    { color:var(--accent); }
.text-warn      { color:var(--warn); }
.font-700       { font-weight:700; }
.font-600       { font-weight:600; }
.uppercase      { text-transform:uppercase; letter-spacing:.8px; }

/* Colors / backgrounds */
.bg-surface     { background:var(--surface); }
.bg-neutral     { background:var(--neutral-50); }
.border-std     { border:1.5px solid var(--border); }

/* Screen inner padding */
.screen-pad     { padding:0 12px 24px; }

/* Section label — used in many screens */
.section-label {
  font-size:10px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:1.5px;
  padding:14px 0 8px;
}

/* ── Botão de ação padrão full-width ─────────────────────── */
.btn-primary {
  width:100%; padding:14px; border:none; border-radius:var(--r-lg);
  background:var(--grad-brand); color:#fff; min-height:var(--touch-min);
  font-family:var(--font-body); font-size:var(--fs-md); font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:8px; transition:transform .15s, box-shadow .15s, filter .15s;
  box-shadow:0 2px 10px rgba(15,76,53,.22);
}
.btn-primary:active { transform:scale(.98); filter:brightness(.96); box-shadow:0 1px 4px rgba(15,76,53,.18); }

.btn-secondary {
  width:100%; padding:12px; border:1.5px solid var(--border);
  border-radius:var(--r-lg); background:transparent; color:var(--text2);
  font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;
  cursor:pointer;
}

/* ── Topbar padronizada ──────────────────────────────────── */
/* Já existe .topbar, .topbar-back, .topbar-title — só adicionamos variantes */
.topbar-title-red  { color:#991b1b; }
.topbar-title-blue { color:#075985; }

/* ── PBS-wrap ação padronizada ───────────────────────────── */
.pbs-actions-row {
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:6px 0 2px;
}

/* pbs-wrap padding variant */
.pbs-wrap-sm { padding: 0 16px 12px; }

/* ══════════════════════════════════════════════
   OBSERVAÇÕES — Imagens
══════════════════════════════════════════════ */
.obs-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.obs-img-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s;
}
.obs-img-wrap:active {
  transform: scale(.95);
}

.obs-img-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.obs-img-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  transition: background .15s;
}
.obs-img-remove:active {
  background: rgba(220,38,38,.8);
}

/* Fullscreen viewer */
.obs-img-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 19999;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fadeIn .2s ease;
  padding: 20px;
}
.obs-img-fullscreen img {
  max-width: 95%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  cursor: grab;
  transform-origin: center center;
  transition: transform 0.05s linear;
  touch-action: none;
}
.obs-img-fullscreen img:active {
  cursor: grabbing;
}
.obs-fullscreen-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .15s;
}
.obs-fullscreen-close:active {
  background: rgba(255,255,255,.3);
}

/* History card image thumbnails */
.hist-obs-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}
.hist-obs-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.hist-obs-thumb:active {
  transform: scale(.9);
}
.hist-obs-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  background: var(--neutral-100);
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════
   PWA INSTALL BANNER
══════════════════════════════════════════════ */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  z-index: 10000;
  padding: 0 12px 16px;
  pointer-events: none;
  opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.pwa-install-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.pwa-install-banner .pwa-install-content {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid var(--border);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -4px 32px rgba(0,0,0,.12), 0 -1px 6px rgba(0,0,0,.06);
  position: relative;
}
.pwa-install-banner .pwa-install-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pwa-install-banner .pwa-install-text {
  flex: 1;
  min-width: 0;
}
.pwa-install-banner .pwa-install-title {
  font-family: var(--font-disp);
  font-size: var(--fs-lg);
  color: var(--text);
  line-height: 1.2;
}
.pwa-install-banner .pwa-install-desc {
  font-size: var(--fs-xs);
  color: var(--text2);
  line-height: 1.35;
  margin-top: 2px;
}
.pwa-install-banner .pwa-install-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--neutral-100);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  color: var(--text3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.pwa-install-banner .pwa-install-close:active {
  background: var(--neutral-200);
}
.pwa-install-banner .pwa-install-actions {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  padding: 0 16px 16px;
  display: flex;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.pwa-install-banner .pwa-install-btn-dismiss {
  flex: 1;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--neutral-50);
  color: var(--text2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.pwa-install-banner .pwa-install-btn-dismiss:active {
  background: var(--neutral-100);
}
.pwa-install-banner .pwa-install-btn-install {
  flex: 1.5;
  padding: 12px;
  border: none;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--green-600), var(--green-800));
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(15,76,53,.3);
}
.pwa-install-banner .pwa-install-btn-install:active {
  transform: scale(.97);
  box-shadow: 0 1px 4px rgba(15,76,53,.2);
}

/* ══════════════════════════════════════════════
   EMPTY STATE — estado vazio rico
══════════════════════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 32px;
  text-align: center;
  gap: 12px;
}
.empty-state-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 4px;
  opacity: .75;
}
.empty-state-title {
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text2);
}
.empty-state-sub {
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: 1.5;
  max-width: 240px;
}
.empty-state-btn {
  margin-top: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-min);
}
.empty-state-btn:active { transform: scale(.96); }

/* ══════════════════════════════════════════════
   HISTÓRICO — ações primária e secundárias
══════════════════════════════════════════════ */
.hist-primary-action {
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: var(--r-lg);
  background: #25D366;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch-min);
  transition: all .15s;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.hist-primary-action:active { transform: scale(.97); }

.hist-secondary-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.hist-sec-btn {
  flex: 1;
  padding: 9px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  transition: all .15s;
}
.hist-sec-btn:active { background: var(--border); }
.hist-sec-btn-danger {
  border-color: var(--red-500) !important;
  color: var(--red-500) !important;
}
.hist-sec-btn-danger:active { background: var(--red-100) !important; }

/* ── FAB tooltip label (hover/focus) ── */
.fab-save::after {
  content: 'Salvar';
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,76,53,.95);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s .1s;
}
.fab-save:focus::after,
.fab-save:hover::after {
  opacity: 1;
}

/* ── pbs-btn touch target mínimo ── */
.pbs-btn { min-height: var(--touch-min); }

/* ── Botão ícone (icon button) ── */
.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.btn-icon:active {
  background: var(--border);
  transform: scale(.93);
}

/* ── Wake lock indicator ── */
.wake-lock-indicator {
  position: absolute;
  top: 10px;
  right: 58px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  display: none;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  z-index: 50;
}
.wake-lock-indicator.visible {
  display: flex;
}
.wake-lock-indicator svg {
  color: #fbbf24;
}

/* ── Botão fantasma (ghost button) ── */
.btn-ghost {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text2);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  min-height: var(--touch-min);
}
.btn-ghost:active {
  background: var(--border);
}

/* ── Card de aviso genérico ── */
.alert-card {
  margin: 12px;
  border-radius: var(--r-xl);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.alert-card-warn {
  background: #fef3c7;
  border: 1.5px solid #fcd34d;
  color: #92400e;
}
.alert-card-error {
  background: var(--red-100);
  border: 1.5px solid #fca5a5;
  color: var(--red-700);
}
.alert-card-info {
  background: var(--green-50);
  border: 1.5px solid var(--green-100);
  color: var(--green-800);
}

/* ── Seletor de espécie padronizado ── */
.species-switch {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.species-btn {
  flex: 1;
  padding: 11px 8px;
  min-height: var(--touch-min);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--neutral-50);
  color: var(--text2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.species-btn.active {
  border-color: var(--accent);
  background: var(--green-50);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 122, 83, .1);
}

/* ── Campo de entrada padronizado ── */
.input-std {
  width: 100%;
  background: var(--neutral-50);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  min-height: var(--touch-min);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  outline: none;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.input-std:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 122, 83, .12);
  background: #fff;
}
.input-std.filled {
  border-color: var(--accent);
}

/* ── Label de campo padronizado ── */
.field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Card de ferramenta padronizado ── */
.tool-card-std {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s;
  position: relative;
  overflow: hidden;
  text-align: left;
  width: 100%;
}
.tool-card-std:active {
  transform: scale(.97);
  box-shadow: var(--shadow-sm);
  border-color: var(--green-100);
}
.tool-card-std::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .15s;
}
.tool-card-std:active::after {
  background: rgba(0, 0, 0, .05);
}

/* ── Medicamentos em relatórios/prescrição ── */
.rpt-med-item { padding: 6px 0; border-bottom: 1px solid var(--neutral-100); }
.rpt-med-name { font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.rpt-med-class { font-size: 13px; color: var(--text2); margin-left: 12px; margin-top: 2px; }
.rpt-med-dose-val { font-weight: 700; font-size: 13px; color: var(--text); }
.rpt-med-dose-form { font-size: 11px; color: var(--text3); margin-top: 1px; line-height: 1.4; }
.rpt-med-dose-wrap { margin-left: 12px; margin-top: 3px; }
.rpt-med-via { font-size: 13px; color: var(--text2); margin-left: 12px; margin-top: 2px; }

.rpt-med-row { padding: 8px 0; border-bottom: 1px solid var(--neutral-100); }
.rpt-med-row-name { font-weight: 700; }
.rpt-med-row-class { color: var(--text2); font-size: 12px; }

/* ── Tool card icon gradients ── */
.tci-green  { background: linear-gradient(135deg,#d1fae5,#6ee7b7); }
.tci-blue   { background: linear-gradient(135deg,#dbeafe,#93c5fd); }
.tci-red    { background: linear-gradient(135deg,#fee2e2,#fca5a5); }
.tci-purple { background: linear-gradient(135deg,#ede9fe,#c4b5fd); }
.tci-emerald{ background: linear-gradient(135deg,#ecfdf5,#a7f3d0); }
.tci-sky    { background: linear-gradient(135deg,#d1fae5,#34d399); }
.tci-sky2   { background: linear-gradient(135deg,#dbeafe,#60a5fa); }

/* ── Euthanasia / Emergency surfaces ── */
.eut-banner { background:#581c87;border-radius:var(--r-xl);padding:12px 14px;margin-bottom:10px;display:flex;align-items:center;gap:10px }
.eut-banner-esp { font-size:26px }
.eut-banner-body { flex:1 }
.eut-banner-name { font-weight:700;font-size:15px;color:var(--text) }
.eut-banner-info { font-size:12px;color:var(--text2) }
.eut-banner-peso { font-size:11px;padding:5px 10px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;font-family:var(--font-body) }
.eut-card { background:#0f172a;border-radius:var(--r-xl);padding:16px;margin-bottom:10px }
.eut-card-title { font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:2px;text-align:center }
.eut-card-value { font-family:var(--font-disp);font-size:44px;color:#fff;letter-spacing:-2px;line-height:1;text-align:center }
.eut-card-unit { font-size:10px;color:rgba(255,255,255,.25);text-align:center;margin-bottom:6px }
.eut-card-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px }
.eut-stat { border-radius:var(--r-lg);padding:10px;text-align:center }
.eut-stat-red   { background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.25) }
.eut-stat-blue  { background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25) }
.eut-stat-green { background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25) }
.eut-stat-indigo{ background:rgba(79,70,229,.1);border:1px solid rgba(79,70,229,.3) }
.eut-stat-label { font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px }
.eut-stat-label-red   { color:rgba(220,38,38,.7) }
.eut-stat-label-blue  { color:rgba(37,99,235,.7) }
.eut-stat-label-green { color:rgba(74,222,128,.7) }
.eut-stat-label-indigo{ color:rgba(129,140,248,.7) }
.eut-stat-value { font-family:var(--font-disp);font-size:32px;color:#fff;line-height:1;letter-spacing:-1px }
.eut-stat-value-green { color:#4ade80 }
.eut-stat-value-indigo { color:#818cf8 }
.eut-stat-sub { font-size:9px;color:rgba(255,255,255,.25);margin-bottom:4px }
.eut-stat-sub-green { color:rgba(74,222,128,.5) }
.eut-stat-sub-indigo { color:rgba(129,140,248,.5) }
.eut-bar-track { height:3px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden }
.eut-bar-fill  { height:100%;width:100%;border-radius:99px;transition:width .5s linear }
.eut-bar-fill-green { background:#4ade80 }
.eut-bar-fill-indigo { background:#818cf8 }
.eut-stat-meta { font-size:10px;margin-top:3px }
.eut-stat-meta-green { color:rgba(74,222,128,.5) }
.eut-stat-meta-indigo { color:rgba(129,140,248,.5) }
.eut-btn { width:100%;padding:18px;border:none;border-radius:var(--r-lg);background:#dc2626;color:#fff;font-family:var(--font-body);font-size:20px;font-weight:800;cursor:pointer;margin-bottom:12px;letter-spacing:.5px;transition:all .15s;text-transform:uppercase }
.eut-btn:active { transform:scale(.98) }
.eut-circle-btn { width:72px;height:72px;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 4px;transition:transform .06s,background .06s,box-shadow .06s;cursor:pointer;user-select:none }
.eut-circle-btn-red   { background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.4) }
.eut-circle-btn-blue  { background:rgba(37,99,235,.15);border-color:rgba(37,99,235,.4) }
.eut-circle-label { font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;text-align:center }
.eut-circle-label-red { color:rgba(220,38,38,.7) }
.eut-circle-label-blue { color:rgba(37,99,235,.7) }
.eut-dot { width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.15);margin:0 auto 28px }

/* ── Tool card button variants ── */
.btn-tool-green  { background:linear-gradient(135deg,#ecfdf5,#a7f3d0) }
.btn-tool-blue   { background:linear-gradient(135deg,#eff6ff,#bfdbfe) }
.text-green-900  { color:#065f46 }
.text-blue-900   { color:#1e3a8a }
.text-purple-900 { color:#581c87 }

/* ── Generic utility ── */
.text-center { text-align:center }
.flex { display:flex }
.items-center { align-items:center }
.gap-2 { gap:8px }
.mt-2 { margin-top:8px }
.mb-2 { margin-bottom:8px }

/* ── Euthanasia alert ── */
.eut-aviso { margin:12px 12px 0;background:#f3e8ff;border:1.5px solid #d8b4fe;border-radius:var(--r-xl);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow-sm) }
.eut-aviso-icon { font-size:22px;flex-shrink:0 }
.eut-aviso-body { font-size:12.5px;color:#581c87;line-height:1.5 }
.eut-aviso strong { color:#3b0764;font-size:13px }

/* ── Euthanasia note card ── */
.eut-note { margin-top:16px;background:#f9f5ff;border:1.5px solid #e9d5ff;border-radius:var(--r-xl);padding:12px 14px;font-size:12px;color:var(--text2);line-height:1.7;box-shadow:var(--shadow-sm) }
.eut-note b { color:#6b21a8 }

/* ── Euthanasia registration card ── */
.eut-reg-card { margin-top:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:var(--shadow-sm) }
.eut-reg-icon { font-size:22px }
.eut-reg-title { font-weight:700;font-size:13px;color:var(--text) }
.eut-reg-sub { font-size:11px;color:var(--text2) }

/* ── MPA Animais Reativos Styles ── */
.tool-card-mpa {
  background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
  border: 1.5px solid #c4b5fd;
}
.tool-card-mpa .tool-card-icon {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
}
.tool-card-mpa .tool-card-title {
  color: #4c1d95;
  font-weight: 700;
}
.tool-card-mpa .tool-card-desc {
  color: #6b21a8;
}

/* Banner do Paciente em MPA */
.mpa-patient-banner {
  background: linear-gradient(135deg, #6d28d9, #4c1d95);
  border-radius: var(--r-xl);
  padding: 12px 16px;
  margin: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  box-shadow: var(--shadow-md);
}
.mpa-patient-avatar {
  font-size: 28px;
  background: rgba(255, 255, 255, 0.15);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpa-patient-details {
  flex: 1;
}
.mpa-patient-name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.mpa-patient-info {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.mpa-peso-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.mpa-peso-box label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2px;
}
.mpa-peso-box input {
  width: 70px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

/* Corpo principal de MPA */
.mpa-body-container {
  padding: 0 12px 24px;
}
.mpa-controls-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mpa-esp-selector {
  display: flex;
  gap: 8px;
}
.mpa-esp-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--border);
  background: var(--surface2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mpa-esp-btn.active {
  background: #f3e8ff;
  border-color: #a855f7;
  color: #6b21a8;
}
.mpa-cardiopata-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.mpa-cardiopata-check input[type="checkbox"] {
  accent-color: #dc2626;
  width: 16px;
  height: 16px;
}

.mpa-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text2);
  margin: 14px 2px 8px;
}

/* Selector de Protocolo */
.mpa-proto-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.mpa-proto-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mpa-proto-btn.active {
  background: #f3e8ff;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}
.mpa-proto-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.mpa-proto-btn.active .mpa-proto-title {
  color: #6d28d9;
}
.mpa-proto-sub {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 2px;
}

/* Alertas Clínicos */
.mpa-alert-card {
  border-radius: var(--r-xl);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
}
.mpa-alert-danger {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  color: #991b1b;
}
.mpa-alert-warning {
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  color: #92400e;
}
.mpa-alert-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* Fármacos Cards */
.mpa-drug-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.mpa-drug-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.mpa-drug-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.mpa-drug-trade {
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  margin-left: 4px;
}
.mpa-drug-class {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 2px;
}
.mpa-drug-vol-badge {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.mpa-vol-val {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.mpa-vol-unit {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;

}

/* Sub-Toggles para alternar fármacos (Metadona/Butorfanol) */
.mpa-sub-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  background: var(--surface2);
  padding: 3px;
  border-radius: var(--r-lg);
}
.mpa-sub-btn {
  flex: 1;
  padding: 6px;
  border: none;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mpa-sub-btn.active {
  background: var(--surface);
  color: #7c3aed;
  box-shadow: var(--shadow-sm);
}

/* Inputs de Dose/Conc/Massa */
.mpa-drug-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;

}
.mpa-input-group label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.mpa-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;

}
.mpa-readonly-val {
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.mpa-drug-note {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);

}

/* Volume Total */
.mpa-total-card {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: #ffffff;
  border-radius: var(--r-xl);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}
.mpa-total-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mpa-total-value {
  font-size: 24px;
  font-weight: 900;
  color: #a7f3d0;
}
.mpa-total-value small {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

/* Reversores de Emergência */
.mpa-reversers-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 14px;
}
.mpa-reversers-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text);
  margin-bottom: 10px;
}
.mpa-reversers-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mpa-reverser-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface2);
}
.mpa-reverser-item.disabled {
  opacity: 0.5;
}
.mpa-reverser-main {
  flex: 1;
}
.mpa-reverser-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.mpa-rev-badge {
  font-size: 9px;
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 700;
}
.mpa-reverser-desc {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.mpa-reverser-vol {
  text-align: right;
  margin-left: 10px;
}
.mpa-reverser-vol strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #059669;
}
.mpa-reverser-vol small {
  font-size: 10px;
  color: var(--text3);
}

/* ══════════════════════════════════════════════
   SETTINGS SHEET & AUTO-EXPORT STYLES
══════════════════════════════════════════════ */
.settings-section-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}

.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-card-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-card-desc {
  font-size: var(--fs-2xs);
  color: var(--text2);
  line-height: 1.35;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.settings-row-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
}

.settings-select {
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.settings-select:focus {
  border-color: var(--accent);
}

/* Toggle Switch Component */
.vk-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.vk-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.vk-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--neutral-300);
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 26px;
}
.vk-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.vk-toggle input:checked + .vk-toggle-slider {
  background-color: var(--green-600);
}
.vk-toggle input:checked + .vk-toggle-slider:before {
  transform: translateX(20px);
}

.settings-info-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-2xs);
  color: var(--text2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.settings-badge-ok {
  background: var(--green-100);
  color: var(--green-800);
}
.settings-badge-warn {
  background: var(--amber-100);
  color: var(--amber-500);
}



/* ═══════════════════════════════════════════════
   EQUIPE ONLINE — colaboração entre usuários (collab.js)
═══════════════════════════════════════════════ */
#colab-btn.colab-btn-on { background: rgba(255, 255, 255, .26); }
.colab-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--green-800);
}
#colab-overlay {
  display: none; position: fixed; inset: 0; z-index: 9800;
  background: rgba(0, 0, 0, .55);
  align-items: flex-end; justify-content: center;
}
#colab-sheet {
  background: var(--bg);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  width: 100%; max-width: 480px; max-height: 92vh;
  display: flex; flex-direction: column;
  animation: slideUpFade .25s ease; overflow: hidden;
}
#colab-header {
  padding: 12px 16px 0; background: var(--surface);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#colab-corpo {
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; flex: 1;
}
.colab-tabs { display: flex; gap: 2px; margin-top: 10px; overflow-x: auto; }
.colab-tabs button {
  flex: 1; padding: 10px 6px; border: none; background: none; white-space: nowrap;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text2);
  border-bottom: 3px solid transparent; cursor: pointer;
}
.colab-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.colab-tab-count {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px;
  background: #dc2626; color: #fff; font-size: 11px;
}
.colab-form { display: flex; flex-direction: column; gap: 10px; }
.colab-form-titulo { font-family: var(--font-disp); font-size: var(--fs-lg); color: var(--text); }
.colab-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--text2);
}
.colab-form input, .colab-msg {
  width: 100%; box-sizing: border-box; padding: 11px 12px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-md);
}
.colab-form input:focus, .colab-msg:focus { outline: none; border-color: var(--accent); }
.colab-msg { margin-top: 10px; resize: vertical; font-size: var(--fs-sm); }
.colab-opc { font-size: 12px; font-weight: 400; color: var(--text2); }
.colab-erro { color: var(--red-500); font-size: 13px; font-weight: 600; min-height: 1px; }
.colab-alerta {
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--amber-100); color: #92400e; font-size: 13px;
}
.colab-btn-primario {
  width: 100%; margin-top: 10px; padding: 13px; min-height: var(--touch-min);
  border: none; border-radius: var(--r-lg); background: var(--accent); color: #fff;
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; cursor: pointer;
}
.colab-btn-primario:disabled { opacity: .6; cursor: default; }
.colab-btn-sec {
  padding: 11px 14px; min-height: var(--touch-min);
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text2);
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
}
.colab-btn-link {
  background: none; border: none; color: var(--accent); padding: 8px 0;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; text-align: left;
}
.colab-secao-titulo {
  font-size: 11px; font-weight: 800; color: var(--text2);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px;
}
.colab-ficha, .colab-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px;
}
.colab-item { margin-bottom: 10px; }
.colab-item.nova { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.colab-ficha-nome { font-weight: 800; font-size: var(--fs-md); color: var(--text); }
.colab-ficha-meta { font-size: 13px; color: var(--text2); margin-top: 2px; }
.colab-ficha-meds {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text);
}
.colab-item-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text2); margin-bottom: 4px; }
.colab-item-msg {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--surface2); font-size: 13px; color: var(--text); white-space: pre-wrap;
}
.colab-item-acoes { display: flex; gap: 8px; margin-top: 4px; align-items: flex-end; }
.colab-item-acoes .colab-btn-primario { flex: 1; width: auto; }
.colab-status {
  display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 9px; vertical-align: middle;
  font-size: 11px; font-weight: 700; background: var(--amber-100); color: #92400e;
}
.colab-status.nova { background: #dc2626; color: #fff; }
.colab-status.lida { background: var(--green-100); color: var(--green-800); }
.colab-usuarios {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; max-height: 38vh; overflow-y: auto;
}
.colab-usuario {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg);
}
.colab-usuario.sel { border-color: var(--accent); background: var(--accent-lt); }
.colab-usuario input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.colab-avatar {
  position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-brand); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.colab-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--neutral-300); border: 2px solid var(--surface);
}
.colab-dot.on { background: #22c55e; }
.colab-usuario-info { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: var(--text); }
.colab-usuario-info small { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colab-vazio { text-align: center; color: var(--text2); font-size: 13px; padding: 24px 8px; line-height: 1.5; }
.colab-toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 14px; color: var(--text); cursor: pointer; }
.colab-toggle input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.hist-btn-carregar.colab-hist-btn { margin-top: 8px; border-color: var(--blue-500); color: var(--blue-500); background: var(--blue-100); }