/* ═══════════════════════════════════════════════
   portal.css — Estilos do Portal da Transparência
   Câmara Municipal de Catalão
   v2.0 — com suporte mobile responsivo
════════════════════════════════════════════════ */

/* ── VARIÁVEIS ── */
:root {
    --navy:      #0f1f3d;
    --navy-mid:  #1a2f52;
    --navy-light:#243a63;
    --gold:      #c9a84c;
    --gold-light:#e6c97a;
    --gold-pale: #f7edcd;
    --text:      #1a1a2e;
    --text-muted:#5a6580;
    --bg:        #f2f4f8;
    --white:     #ffffff;
    --border:    #dde2ee;
    --accent:    #2563eb;
    --sidebar-w: 260px;
    --topbar-h:  64px;
    --radius:    10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Sora', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8cedc; border-radius: 3px; }

/* ══════════════ OVERLAY MOBILE ══════════════ */
#sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 190;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

#sidebarOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ══════════════ SIDEBAR ══════════════ */
#sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.sidebar-brand {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(201,168,76,.2);
}

.sidebar-brand img {
    max-width: 90px;
    display: block;
    margin-bottom: 12px;
}

.sidebar-brand .emblem {
    width: 38px; height: 38px;
    background: var(--gold);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 12px;
}

.sidebar-brand h2 {
    font-size: .78rem;
    font-weight: 600;
    color: var(--gold-light);
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}

.sidebar-brand p {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
    margin-top: 3px;
}

/* Botão de fechar sidebar no mobile */
.sidebar-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,.1);
    border: none;
    color: rgba(255,255,255,.7);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 1;
}

.sidebar-close:hover { background: rgba(255,255,255,.2); color: #fff; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

.nav-section {
    padding: 6px 18px 2px;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.3);
    font-weight: 600;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    font-size: .82rem;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all .2s;
    border-left: 3px solid transparent;
}

.nav-link i { font-size: 1rem; flex-shrink: 0; }

.nav-link:hover, .nav-link.active {
    color: var(--white);
    background: rgba(201,168,76,.1);
    border-left-color: var(--gold);
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-size: .7rem;
    color: rgba(255,255,255,.3);
}

/* ══════════════ MAIN WRAPPER ══════════════ */
#main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ══════════════ TOPBAR ══════════════ */
.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 0 36px;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 12px;
}

/* Botão hamburger — oculto no desktop */
.btn-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--navy);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background .2s;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-hamburger:hover { background: var(--bg); }

/* Bloqueia scroll no body quando sidebar está aberta (iOS-safe) */
body.sidebar-open {
    overflow: hidden;
    /* iOS precisa de position fixed para bloquear scroll */
    position: fixed;
    width: 100%;
}

.topbar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    flex: 1;
    min-width: 0;
}

.topbar-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-title i { color: var(--gold); font-size: 1.1rem; flex-shrink: 0; }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* ── Busca ── */
.search-wrap {
    position: relative;
    width: 360px;
}

.search-wrap > i {
    position: absolute;
    left: 14px;
    top: 14px;
    color: var(--text-muted);
    font-size: .9rem;
    pointer-events: none;
    z-index: 1;
}

#smSearch,
#smSearchMobile {
    width: 100%;
    padding: 9px 16px 9px 40px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-family: 'Sora', sans-serif;
    font-size: .85rem;
    color: var(--text);
    outline: none;
    transition: border-color .2s;
}

#smSearch:focus,
#smSearchMobile:focus { border-color: var(--accent); }

#smSearch::placeholder,
#smSearchMobile::placeholder { color: #a0aabe; }

/* ── Dropdown de resultados ── */
.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(15,31,61,.13);
    z-index: 500;
    max-height: 420px;
    overflow-y: auto;
}

.search-dropdown.open { display: block; }

.sd-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px 5px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.sd-group-label:first-child { border-top: none; }

.sd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: .82rem;
    color: var(--text);
    text-decoration: none;
    transition: background .13s;
}

.sd-item:hover { background: var(--bg); }

.sd-item-disabled {
    opacity: .5;
    pointer-events: none;
}

.sd-chev {
    font-size: .6rem;
    color: var(--gold);
    flex-shrink: 0;
}

.sd-ext {
    margin-left: auto;
    font-size: .65rem;
    color: #aab;
    flex-shrink: 0;
}

.sd-badge {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 7px;
}

.sd-loading,
.sd-empty {
    padding: 20px 16px;
    font-size: .82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-dropdown mark {
    background: #fef08a;
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Botão de busca mobile ── */
.btn-search-mobile {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background .2s;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-search-mobile:hover { background: var(--bg); color: var(--navy); }

/* Barra de busca expansível mobile */
.search-mobile-bar {
    display: none;
    padding: 10px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: var(--topbar-h);
    z-index: 99;
}

.search-mobile-bar.open { display: block; }

.search-mobile-bar .search-wrap {
    width: 100%;
}

/* ══════════════ CONTEÚDO ══════════════ */
.content {
    padding: 32px 36px 48px;
    flex: 1;
}

.content-header { margin-bottom: 28px; }

.content-header h1 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--navy);
}

.content-header p {
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ══════════════ GRID DE CARDS ══════════════ */
#smBody {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 1400px) { #smBody { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { #smBody { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #smBody { grid-template-columns: 1fr; } }

/* ── Cards ── */
.sm-row {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    transition: box-shadow .2s, opacity .2s, transform .2s;
    display: flex;
    flex-direction: column;
}

.sm-row:hover {
    box-shadow: 0 4px 20px rgba(15,31,61,.08);
    transform: translateY(-2px);
}

.sm-row.hidden { display: none; }

.sm-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.sm-icon {
    width: 32px; height: 32px;
    background: var(--gold-pale);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-size: .95rem;
    flex-shrink: 0;
}

.sm-cat-title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.3;
}

/* ── Links dos cards ── */
.sm-links { list-style: none; flex: 1; }
.sm-links li { margin-bottom: 3px; }

.sm-links li a {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 6px;
    border-radius: 5px;
    text-decoration: none;
    font-size: .8rem;
    color: var(--text-muted);
    line-height: 1.45;
    transition: all .15s;
}

.sm-links li a i {
    font-size: .65rem;
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 5px;
}

.sm-links li a:hover {
    background: var(--bg);
    color: var(--navy);
}

.sm-links li a.no-link {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

/* ── Atos Legislativos: card de largura total ── */
.sm-row.wide { grid-column: 1 / -1; }

.sm-row.wide .sm-links {
    columns: 4;
    column-gap: 24px;
}

@media (max-width: 1200px) { .sm-row.wide .sm-links { columns: 3; } }
@media (max-width: 800px)  { .sm-row.wide .sm-links { columns: 2; } }
@media (max-width: 500px)  { .sm-row.wide .sm-links { columns: 1; } }

/* ── Estado vazio ── */
#noRes {
    display: none;
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: var(--text-muted);
}

#noRes i { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .4; }
#noRes strong { font-size: 1rem; }
#noRes p { font-size: .85rem; margin-top: 4px; }

/* highlight busca */
mark { background: #fef08a; border-radius: 2px; padding: 0 1px; }

/* ══════════════ ACESSIBILIDADE ══════════════ */
.a11y-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 6px;
}

.a11y-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Sora', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
    line-height: 1;
}

.a11y-btn:hover { background: var(--border); color: var(--navy); }

.a11y-btn.active {
    background: var(--navy);
    color: var(--gold-light);
}

.a11y-sep {
    width: 1px;
    height: 18px;
    background: var(--border);
    flex-shrink: 0;
}

/* ══════════════ RESPONSIVO — BREAKPOINTS ══════════════ */

/* ── Tablet largo: sidebar menor ── */
@media (max-width: 1100px) {
    :root { --sidebar-w: 220px; }

    .search-wrap { width: 260px; }

    .a11y-btn span { display: none; }
    .a11y-btn { padding: 5px 8px; }
}

/* ── Tablet: sidebar colapsada, topbar adaptada ── */
@media (max-width: 768px) {

    /* Sidebar vira drawer */
    #sidebar {
        transform: translateX(-100%);
        width: min(var(--sidebar-w), 85vw);
        box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }

    #sidebar.open {
        transform: translateX(0);
    }

    #sidebarOverlay { display: block; }

    .sidebar-close { display: flex; }

    /* Main ocupa largura total */
    #main { margin-left: 0; }

    /* Topbar */
    .topbar { padding: 0 16px; }

    .btn-hamburger { display: flex; }

    /* Ocultar busca inline, mostrar ícone */
    .search-wrap { display: none; }
    .btn-search-mobile { display: flex; }

    /* Barra de acessibilidade compacta: só contraste */
    .a11y-bar .a11y-btn:not(#btnContrast):not(#btnFontSm):not(#btnFontMd):not(#btnFontLg) { display: none; }
    .a11y-sep { display: none; }

    /* Título topbar */
    .topbar-title { font-size: .88rem; }

    /* Conteúdo */
    .content { padding: 20px 16px 40px; }

    .content-header h1 { font-size: 1.2rem; }
}

/* ── Mobile pequeno ── */
@media (max-width: 480px) {

    .topbar { padding: 0 12px; gap: 8px; }

    .topbar-title { font-size: .82rem; }
    .topbar-title i { display: none; }

    /* Barra de acessibilidade: só contraste */
    .a11y-bar { gap: 2px; padding: 3px 4px; }
    .a11y-btn { padding: 5px 7px; font-size: .72rem; }
    .a11y-btn#btnFontSm,
    .a11y-btn#btnFontMd,
    .a11y-btn#btnFontLg { display: none; }
    .a11y-sep { display: none; }

    .content { padding: 16px 12px 40px; }

    .content-header h1 { font-size: 1.1rem; }
    .content-header p  { font-size: .8rem; }

    /* Cards mobile: padding menor */
    .sm-row { padding: 14px; }

    /* Links com área de toque maior */
    .sm-links li a { padding: 7px 6px; font-size: .82rem; }

    /* Touch target mínimo 44px para nav-links */
    .nav-link { padding: 12px 20px; }
}

/* ── Landscape phone ── */
@media (max-width: 768px) and (orientation: landscape) {
    #sidebar { width: min(240px, 70vw); }
}

/* ══════════════ ALTO CONTRASTE ══════════════ */
body.high-contrast {
    --navy:      #000000;
    --navy-mid:  #111111;
    --navy-light:#1a1a1a;
    --gold:      #ffdd00;
    --gold-light:#ffee66;
    --gold-pale: #333300;
    --text:      #ffffff;
    --text-muted:#dddddd;
    --bg:        #111111;
    --white:     #1e1e1e;
    --border:    #555555;
    --accent:    #66aaff;
    background:  #111111;
    color:       #ffffff;
}

body.high-contrast .topbar          { background: #000; border-bottom-color: #555; }
body.high-contrast .topbar-title    { color: #ffdd00; }
body.high-contrast #smSearch        { background: #222; color: #fff; border-color: #666; }
body.high-contrast .sm-row          { background: #1e1e1e; border-color: #444; }
body.high-contrast .sm-row:hover    { box-shadow: 0 0 0 2px #ffdd00; transform: none; }
body.high-contrast .sm-links li a   { color: #cccccc; }
body.high-contrast .sm-links li a:hover { background: #333; color: #ffdd00; }
body.high-contrast .sm-icon         { background: #333300; color: #ffdd00; }
body.high-contrast .sm-cat-title    { color: #ffdd00; }
body.high-contrast .sm-links li a i { color: #ffdd00; }
body.high-contrast .a11y-bar        { border-color: #555; background: #1a1a1a; }
body.high-contrast .a11y-btn        { color: #ccc; }
body.high-contrast .a11y-btn:hover  { background: #333; color: #ffdd00; }
body.high-contrast .a11y-btn.active { background: #ffdd00; color: #000; }
body.high-contrast .a11y-sep        { background: #444; }
body.high-contrast #sidebar         { background: #000; }
body.high-contrast .sidebar-close   { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
body.high-contrast .btn-hamburger   { color: #ffdd00; }
body.high-contrast .nav-link        { color: rgba(255,255,255,.7); }
body.high-contrast .nav-link:hover,
body.high-contrast .nav-link.active { background: rgba(255,221,0,.15); border-left-color: #ffdd00; color: #ffdd00; }
body.high-contrast .sidebar-brand h2  { color: #ffdd00; }
body.high-contrast .sidebar-footer    { color: rgba(255,255,255,.4); }
body.high-contrast .content-header h1 { color: #ffdd00; }
body.high-contrast mark             { background: #ffdd00; color: #000; }
body.high-contrast .search-mobile-bar { background: #000; border-color: #444; }
body.high-contrast #sidebarOverlay  { background: rgba(0,0,0,.75); }