/* ============================================================
 * left-sidebar.css
 * ------------------------------------------------------------
 * Menu lateral esquerdo (navegação): logotipo, links "Sobre",
 * "Pacientes" e "Calculadoras", incluindo o estado retraído
 * (collapsed) alternado por js/sidebar.js.
 * ============================================================ */

  /* ---------- left sidebar ---------- */
  .left-sidebar{ position: fixed; top:0; left:0; bottom:0; width: var(--ls-current); background: var(--ls-bg); color: var(--ls-ink); border-right: 1px solid var(--ls-line); display:flex; flex-direction:column; z-index: 100; transition: width .32s cubic-bezier(.4,0,.0,1), transform .32s ease; overflow: hidden; }
  .ls-header{ display:flex; align-items:center; gap:12px; padding: 20px 16px; border-bottom: 1px solid var(--ls-line); flex-shrink:0; min-height: 78px; transition: padding .32s cubic-bezier(.4,0,.0,1); }
  .ls-logo{ width:38px; height:38px; border-radius:11px; flex-shrink:0; background: linear-gradient(135deg, var(--blue), #6f7bf0); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px; box-shadow: 0 4px 14px rgba(52,82,217,.45); }
  .ls-brand{ display:flex; flex-direction:column; min-width:0; white-space:nowrap; }
  .ls-brand .ls-title{ font-size:16.5px; font-weight:800; color:#fff; }
  .ls-brand .ls-subtitle{ font-size:10.5px; font-weight:700; color: var(--ls-ink-faint); text-transform:uppercase; margin-top:1px; }
  .left-sidebar.collapsed .ls-brand{ opacity:0; pointer-events:none; position:absolute; }

  .ls-toggle{ margin-left:auto; flex-shrink:0; width:30px; height:30px; border-radius:9px; border:1px solid var(--ls-line); background: var(--ls-panel); color: var(--ls-ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background .15s ease, color .15s ease; }
  .ls-toggle:hover{ background:#282b3c; color:#fff; }
  .ls-toggle svg{ width:15px; height:15px; transition: transform .32s cubic-bezier(.4,0,.0,1); }
  .left-sidebar.collapsed .ls-toggle svg{ transform: rotate(180deg); }
  .left-sidebar.collapsed .ls-header{ flex-direction: column; justify-content:center; align-items:center; gap:10px; padding: 18px 0; }
  .left-sidebar.collapsed .ls-toggle{ margin-left:0; }

  .ls-body{ flex:1; overflow-y:auto; overflow-x:hidden; padding: 20px 16px 16px; display:flex; flex-direction:column; gap:22px; }
  .ls-body::-webkit-scrollbar{ width:6px; }
  .ls-body::-webkit-scrollbar-thumb{ background: var(--ls-line); border-radius:6px; }
  .left-sidebar.collapsed .ls-body{ padding: 16px 0; align-items:center; }

  .ls-nav{ display:flex; flex-direction:column; gap:8px; }
  .left-sidebar.collapsed .ls-nav{ align-items:center; }
  .ls-nav-btn{ display:inline-flex; align-items:center; gap:9px; width:100%; padding: 10px 14px; border-radius: var(--radius-sm); border:1px solid var(--ls-line); background: var(--ls-panel); color: var(--ls-ink); font-family: var(--sans); font-size:13px; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
  .ls-nav-btn:hover{ background:#282b3c; border-color:#373b52; }
  .ls-nav-btn:active{ transform: translateY(1px); }
  .ls-nav-btn svg{ width:16px; height:16px; flex-shrink:0; }
  .left-sidebar.collapsed .ls-nav-btn{ width:38px; height:38px; padding:0; justify-content:center; }
  .left-sidebar.collapsed .ls-nav-btn span{ display:none; }

  .ls-footer{ padding: 14px 16px; border-top:1px solid var(--ls-line); font-size:10.5px; color: var(--ls-ink-faint); text-align:center; flex-shrink:0; }
  .left-sidebar.collapsed .ls-footer{ opacity:0; }