/* ============================================================
 * calculator-panel.css
 * ------------------------------------------------------------
 * Painel deslizante das calculadoras clínicas (peso predito,
 * complacência estática, RAW, IRRS/Tobin), a barra superior
 * mobile (.mobile-topbar) e o overlay (.ls-scrim) usados em
 * telas estreitas. Controlado por js/calculator-panel.js e
 * js/sidebar.js.
 * ============================================================ */

  /* ---------- Painel de Calculadoras ---------- */
  .calc-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: calc(var(--ls-current) + 320px);
    padding-left: var(--ls-current);
    background: var(--panel);
    border-right: 1px solid var(--line);
    z-index: 90;
    transform: translateX(calc(-100% + var(--ls-current)));
    transition: transform .32s cubic-bezier(.4,0,.0,1), width .32s cubic-bezier(.4,0,.0,1), padding-left .32s cubic-bezier(.4,0,.0,1);
    box-shadow: var(--shadow-lg);
  }
  body.calc-open .calc-panel { transform: translateX(0); }
  
  .calc-panel-inner { display: flex; flex-direction: column; width: 320px; height: 100%; }
  .calc-header { padding: 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
  .calc-header h3 { margin: 0; font-size: 16.5px; color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
  .calc-close { 
    background: none; border: none; font-size: 24px; color: var(--ink-dim); 
    cursor: pointer; line-height: 1; padding: 0; display: flex; 
    align-items: center; justify-content: center; width: 32px; height: 32px; 
    border-radius: 50%; transition: background 0.15s; 
  }
  .calc-close:hover { background: var(--panel-2); color: var(--ink); }
  .calc-body { padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; }
  .calc-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--panel-2); border-radius: var(--radius-sm); border: 1px solid var(--line); }
  .calc-ref { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; font-weight: 600; line-height: 1.4; }
  .calc-result { padding: 14px; background: var(--blue-dim); color: var(--blue-active); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; line-height: 1.5; }
  .calc-send { width: 100%; margin-top: 12px; font-size: 13px; padding: 10px; border-radius: 12px; }
  
  .calc-lista { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 20px; }
  .calc-lista h4 { margin: 0 0 10px; font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.05em; }
  .calc-lista ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .calc-lista li { font-size: 12.5px; line-height:1.4; background: var(--panel-3); padding: 10px 12px; border-radius: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .calc-lista-rm { background: none; border: none; color: var(--danger); cursor: pointer; font-weight: bold; font-size: 16px; padding: 0 4px; display: flex; }
  
  /* Mobile adjustments */
  .mobile-topbar{ display:none; position:fixed; top:0; left:0; right:0; height:56px; background: var(--panel); border-bottom:1px solid var(--line); z-index: 110; align-items:center; gap:12px; padding:0 14px; box-shadow: var(--shadow-sm); }
  .mobile-topbar .mt-title{ font-size:14.5px; font-weight:800; letter-spacing:-0.01em; }
  .mt-btn{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background: var(--panel-2); color: var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .mt-btn svg{ width:17px; height:17px; }
  .ls-scrim{ display:none; position:fixed; inset:0; background: rgba(10,11,18,.5); z-index: 95; opacity:0; transition: opacity .25s ease; }
  .ls-scrim.show{ display:block; opacity:1; }

  @media (max-width: 1000px){
    body{ padding-left:20px !important; padding-top: 76px; transition:none; }
    .mobile-topbar{ display:flex; }
    .left-sidebar{ top:56px; width: 280px !important; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .left-sidebar.mobile-open{ transform: translateX(0); }
    .left-sidebar .ls-toggle{ display:none; }
    .left-sidebar .ls-header{ flex-direction:row !important; justify-content:flex-start !important; padding:20px 16px !important; }
    .left-sidebar .ls-brand{ opacity:1 !important; pointer-events:auto !important; position:static !important; }
    .left-sidebar .ls-body{ padding:20px 16px 16px !important; align-items:stretch !important; }
    
    .calc-panel { top: 56px; width: 100%; max-width: 320px; padding-left: 0; transform: translateX(-100%); z-index: 105; }
    .calc-panel-inner { width: 100%; }
    body.calc-open .calc-panel { transform: translateX(0); }
    body.calc-open { padding-left: 20px !important; }
  }