/* ============================================================
   SINTOMAS · ficha do Painel (02/out/2026)
   Liga/desliga com um toque, o mês em palavras, gráfico calmo.
   Usa a base de modules/ficha/ficha.css (fi-card, fi-sub, fi-seg).
   ============================================================ */
.si-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.si-tile { display: flex; align-items: flex-start; gap: 12px; border: 1px solid rgba(46,42,38,.1); border-radius: 13px; padding: 12px 14px; background: #FFF; }
.si-tile.on { border-color: rgba(202,169,103,.55); background: #FDFAF3; }
.si-tile-txt { flex: 1; min-width: 0; }
.si-tile-nome { font-size: 13px; font-weight: 600; color: #241F1B; margin-bottom: 2px; }
.si-switch { flex: none; width: 38px; height: 22px; border-radius: 22px; border: none; background: #DCD3C6; position: relative; cursor: pointer; padding: 0; transition: background .15s; margin-top: 2px; }
.si-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: transform .15s; }
.si-switch[aria-checked="true"] { background: #211D18; }
.si-switch[aria-checked="true"] span { transform: translateX(16px); }
.si-switch:disabled { opacity: .55; cursor: default; }
.si-switch:focus-visible, .si-vista:focus-visible, .si-n:focus-visible, .si-chip:focus-visible { outline: 2px solid #CAA967; outline-offset: 2px; }

.si-vistas, .si-cat-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.si-cat-nav { margin-bottom: 14px; }
.si-vista { border: 1px solid rgba(46,42,38,.12); background: #FFF; border-radius: 20px; padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; color: #5A5049; cursor: pointer; }
.si-vista.on { background: #211D18; border-color: #211D18; color: #F6F2EE; }
.si-vista.on .fi-sub { color: rgba(246,242,238,.7); }

.si-resumos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.si-resumo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; background: #FBF8F2; border: 1px solid rgba(46,42,38,.06); border-radius: 13px; padding: 14px 16px; cursor: pointer; font-family: inherit; }
.si-resumo:hover { background: #FFF; border-color: rgba(202,169,103,.5); }
.si-resumo-nome { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: #241F1B; }
.si-resumo-ir { margin-top: 6px; font-size: 11px; font-weight: 600; color: #A5654E; }

.si-mes { background: #FBF8F2; border-radius: 13px; padding: 14px 16px; margin-bottom: 14px; }
.si-frases { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.si-frases li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; font-size: 12.5px; color: #2E2A26; line-height: 1.45; }
.si-fr-rot { color: #7A6E63; }
.si-rel { margin-top: 10px; font-size: 12.5px; color: #5A5049; border-top: 1px dashed rgba(46,42,38,.1); padding-top: 10px; line-height: 1.5; }

.si-graf { margin-top: 4px; }
.si-graf-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.si-legenda { display: flex; flex-wrap: wrap; gap: 6px; }
.si-leg { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(46,42,38,.1); background: #FFF; border-radius: 20px; padding: 4px 10px; font-family: inherit; font-size: 11px; color: #8D7B6A; cursor: pointer; }
.si-leg.on { color: #241F1B; border-color: rgba(46,42,38,.25); font-weight: 600; }
.si-leg-cor { width: 9px; height: 9px; border-radius: 50%; }
.si-leg:not(.on) .si-leg-cor { opacity: .35; }
.si-svg { width: 100%; height: auto; display: block; }
.si-mens { display: inline-block; width: 10px; height: 10px; background: rgba(165,101,78,.16); border-radius: 2px; vertical-align: -1px; margin-right: 3px; }

.si-form-corpo { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.si-campo { display: flex; flex-direction: column; gap: 6px; }
.si-rot { font-size: 12.5px; font-weight: 600; color: #241F1B; }
.si-escala { display: flex; flex-wrap: wrap; gap: 5px; }
.si-n { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(46,42,38,.14); background: #FFF; font-family: inherit; font-size: 12px; font-weight: 600; color: #5A5049; cursor: pointer; }
.si-n.on { background: #211D18; color: #F6F2EE; border-color: #211D18; }
.si-extremos { display: flex; justify-content: space-between; max-width: 400px; font-size: 10.5px; color: #A99B8C; }
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.si-chip { border: 1px solid rgba(46,42,38,.14); background: #FFF; border-radius: 20px; padding: 6px 13px; font-family: inherit; font-size: 12px; color: #5A5049; cursor: pointer; }
.si-chip.on { background: #211D18; color: #F6F2EE; border-color: #211D18; }

.si-hist { list-style: none; margin: 12px 0 0; padding: 0; }
.si-hist li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px dashed rgba(46,42,38,.08); font-size: 12px; color: #2E2A26; }
.si-hist-v { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.si-hist-v b { font-weight: 600; color: #7A6E63; }
.si-hist-nota { flex-basis: 100%; color: #5A5049; font-style: italic; }

@media (max-width: 720px) {
  .si-frases li { grid-template-columns: 1fr; gap: 1px; }
  .si-hist li { grid-template-columns: 50px minmax(0, 1fr); }
  .si-hist li > .fi-sub { grid-column: 2; }
  .si-n { width: 30px; height: 30px; }
}