/* pages/vademecum.css - estilos exclusivos da pagina "vademecum".
 * Use SOMENTE tokens de app.css (var(--bg2), var(--sp-4), var(--r-md), var(--fs-sm)...).
 * Carregado por app.html depois de app.css; escopo: #page-vademecum.
 * Nao edite app.css para estilos de pagina (evita conflitos de merge). */

#page-vademecum{padding:var(--sp-5) var(--sp-6) var(--sp-10)}
@media (max-width:768px){#page-vademecum{padding:var(--sp-4) 14px var(--sp-8)}}

#page-vademecum .vad-title{margin:0 0 var(--sp-1);font:800 var(--fs-lg)/1.2 var(--font-d);color:var(--text)}
#page-vademecum .vad-subtitle{font-size:var(--fs-sm);color:var(--text2)}
#page-vademecum .vad-geral-count{font-size:var(--fs-sm);color:var(--text2);margin-bottom:var(--sp-3);min-height:1.2em}
#page-vademecum .vad-sort-label{font-size:var(--fs-xs);color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
#page-vademecum .vad-sort-group{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
#page-vademecum .vad-sort-btn{min-height:var(--tap);padding:0 var(--sp-4)}
#page-vademecum .vad-sort-btn[aria-pressed="true"]{color:var(--blue-text)}
#page-vademecum .vad-back-btn{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:var(--tap);margin-bottom:var(--sp-3);padding:0;background:none;border:0;color:var(--blue-text);font:500 var(--fs-base) var(--font-b);cursor:pointer}

/* Grade de leis */
#page-vademecum .vad-laws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--sp-4)}
#page-vademecum .vad-cat-header{margin:var(--sp-3) 0 0;font-size:var(--fs-xs)}
#page-vademecum .vad-law-card{
  display:flex;flex-direction:column;align-items:stretch;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;min-height:var(--tap);
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);padding:var(--sp-4);
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
#page-vademecum .vad-law-card>*{display:block}
#page-vademecum .vad-law-meta{display:flex}
#page-vademecum .vad-law-card:hover{transform:none}
@media (hover:hover){#page-vademecum .vad-law-card:hover{transform:translateY(-2px)}}
#page-vademecum .vad-law-card:focus-visible,#page-vademecum .vad-article-hdr:focus-visible,#page-vademecum .vad-btn-read:focus-visible,
#page-vademecum .vad-note-save:focus-visible,#page-vademecum .vad-tool-btn:focus-visible,#page-vademecum .vad-sort-btn:focus-visible,
#page-vademecum .vad-back-btn:focus-visible,#page-vademecum .subtab:focus-visible,#page-vademecum .vad-download-all-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
#page-vademecum .vad-note-input:focus-visible,#page-vademecum .q-search-input:focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--focus-ring)}
#page-vademecum .vad-prog-bar{display:block}
#page-vademecum .vad-prog-fill{display:block}

/* Artigos: cabeçalho é <button> */
#page-vademecum .vad-article-hdr{
  width:100%;min-height:var(--tap);background:transparent;border:0;text-align:left;font:inherit;color:inherit;
}
#page-vademecum .vad-article-hdr:hover{background:var(--bg3)}
#page-vademecum .vad-art-preview{color:var(--text2)}
#page-vademecum .vad-art-law-name{margin-bottom:var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--blue-text)}
#page-vademecum .vad-btn-read{min-height:var(--tap);cursor:pointer;border:0;font:600 var(--fs-sm) var(--font-b)}
#page-vademecum .vad-btn-read[aria-busy="true"]{opacity:.7;cursor:progress}
#page-vademecum .vad-note-save{min-height:var(--tap);min-width:var(--tap);cursor:pointer}
#page-vademecum .vad-note-save:disabled{opacity:.7;cursor:progress}
#page-vademecum .vad-note-input{min-height:var(--tap)}
#page-vademecum .vad-tool-btn{min-height:var(--tap);min-width:var(--tap)}
#page-vademecum .vad-download-all-btn{min-height:var(--tap)}
#page-vademecum .vad-article-body.open{animation:pa-rise var(--dur-2) var(--ease-out) both}
#page-vademecum .vad-art-text{overflow-wrap:anywhere}

/* Cabeçalho da lei */
#page-vademecum .vad-prog-header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
#page-vademecum .vad-prog-main{flex:1;min-width:min(100%,240px)}
#page-vademecum .vad-prog-side{flex-shrink:0;text-align:right}
#page-vademecum .vad-prog-title{margin:0}

/* Skeleton / estados */
.vad-skel-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.vad-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-column:1/-1}
.vad-skel-item{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2)}
#page-vademecum .vad-state{border:1px dashed var(--border2);border-radius:var(--r-lg);background:var(--bg2)}

/* Mobile: 16px em campos, 44px em alvos */
@media (max-width:768px){
  #page-vademecum input,#page-vademecum select,#page-vademecum textarea{font-size:16px}
  #page-vademecum .vad-note-wrap{flex-basis:100%}
  #page-vademecum .vad-art-actions{gap:var(--sp-2)}
  #page-vademecum .vad-download-all-btn{width:100%}
  #page-vademecum .vad-article-hdr{padding:var(--sp-3)}
}
@media (prefers-reduced-motion:reduce){
  #page-vademecum .vad-article-body.open{animation:none}
  #page-vademecum .vad-law-card{transition:none}
}