/* ============================================================
 * sub-sections.css
 * ------------------------------------------------------------
 * Blocos condicionais que aparecem/desaparecem dentro dos
 * cartões (.sub), linhas dinâmicas de medicação (.med-rows/
 * .med-row), grade de cabeçalho (.hdr-grid) e a área de saída
 * do texto gerado (#saida-wrap / #saida).
 * ============================================================ */

  .sub{ margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--blue); background: var(--panel-2); border-radius: 0 12px 12px 0; display:none; }
  .sub.show{ display:block; animation: subIn .18s ease; }
  @keyframes subIn{ from{ opacity:0; transform: translateY(-3px);} to{ opacity:1; transform: translateY(0);} }

  .med-rows{ display:flex; flex-direction:column; gap:12px; }
  .med-row{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
  .med-row .field{ min-width:170px; margin:0; }
  .med-row .field.dose{ max-width:140px; min-width:110px; }
  .med-remove{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-dim); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: background .15s ease, color .15s ease, border-color .15s ease; margin-bottom:2px; }
  .med-remove:hover{ background:var(--danger-dim); color:var(--danger); border-color:var(--danger); }
  .add-row-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; padding:8px 14px; border-radius:999px; border:1px dashed var(--line-strong); background:var(--panel); color: var(--blue); font-size:12.5px; font-weight:700; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
  .add-row-btn:hover{ background: var(--blue-dim); border-color: var(--blue); }

  .hdr-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .hdr-grid .field.full{ grid-column: 1 / -1; }

  #saida-wrap{ display:none; }
  #saida-wrap.show{ display:block; }
  #saida{ width: 100%; min-height: 320px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.65; padding: 18px; white-space: pre-wrap; }
  .hint{ font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; line-height:1.5; }
  ::selection{ background: var(--blue-dim-strong); }