/* ================================================================
   redesign.css — Portal Reriutaba
   Regra: só CSS, zero PHP/JS/HTML
   ================================================================ */

/* ── FONT IMPORT — aplicada em todo o site via este arquivo ───── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── 1. BASE ─────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif !important;
  font-size: 14px;
  line-height: 1.65;
  color: #1e293b;
  background: #f0f4f8 !important;
  -webkit-font-smoothing: antialiased;
}

/* Aplica Inter em todos os elementos de texto — exceto Font Awesome */
h1, h2, h3, h4, h5, h6,
p, a, li, td, th, span, label,
div, section, article, aside, header, footer, nav, main,
input, select, textarea, button,
.btn, .nav, .navbar, .dropdown-menu,
table, caption, figcaption, blockquote,
.modal, .modal-title, .modal-body, .tab-content {
  font-family: 'Inter', 'Roboto', 'Open Sans', sans-serif !important;
}

/* Preserva a fonte de ícones do Font Awesome — não sobrescrever */
.fa, .fas, .far, .fab, .fal, .fad,
[class^="fa-"], [class*=" fa-"],
.glyphicon, [class^="glyphicon-"] {
  font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}

/* ── 2. FIX: wow.js ──────────────────────────────────────────── */
.wow { visibility: visible !important; animation-name: none !important; }

/* ── 3. BARRA ARCO-ÍRIS ──────────────────────────────────────── */
#barra_cores {
  min-height: 4px !important;
  height: 4px !important;
}

/* ── 4. NAVBAR ───────────────────────────────────────────────── */
header#header {
  box-shadow: 0 3px 16px rgba(0,0,0,.12) !important;
}

/* Top bar */
#top-bar { padding: 7px 0 !important; }
#top-bar p, #top-bar a { font-size: 13px !important; }

#font-setting-buttons a {
  font-size: 10px !important;
  padding: 4px 9px;
  border-radius: 5px;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.9;
}
#font-setting-buttons a:hover { opacity: 1; text-decoration: none !important; }

/* Nav links */
.navbar-default .navbar-nav > li > a {
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  padding: 12px 14px !important;
  transition: background-color 0.2s !important;
}
.navbar-default .navbar-nav > li > a:hover { opacity: 0.88; }

/* Dropdown */
.dropdown-menu {
  border: none !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, #0f9afc, #2ac9e5) 1 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.14) !important;
  padding: 8px 6px !important;
  margin-top: 0 !important;
  min-width: 220px !important;
}

.dropdown-menu > li > a {
  border-radius: 7px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 500;
  margin: 2px 0;
  transition: background-color 0.15s !important;
}

/* ── 5. BOTÕES DO TOPO (#EsOv) ───────────────────────────────── */
#EsOv {
  border-radius: 8px !important;
  font-size: 13px !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
}

/* ── 6. TABS ─────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid #e2e8f0 !important;
  margin-bottom: 0 !important;
  background: #f8fafc;
  border-radius: 10px 10px 0 0;
  padding: 0 10px;
}

.nav-tabs > li > a {
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 11px 16px !important;
  color: #64748b;
  margin-right: 3px;
  transition: color 0.2s !important;
  background: transparent !important;
}

.nav-tabs > li > a:hover { color: #1e293b; background: transparent !important; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border: none !important;
  border-bottom: 3px solid #0f9afc !important;
  color: #0f9afc !important;
  background: #fff !important;
  font-weight: 700;
  border-radius: 8px 8px 0 0 !important;
}

/* ── 7. TAB CONTENT ──────────────────────────────────────────── */
.tab-content {
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  padding: 24px 22px;
  border-top: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* ── 8. LINHAS DE DOCUMENTOS ─────────────────────────────────── */
.tab-pane .row[style*="border-left"],
.tab-content .row[style*="border-left"],
div[style*="border-left:3px solid"],
div[style*="border-left: 3px solid"] {
  border-radius: 8px !important;
  background: #fff !important;
  margin-bottom: 8px !important;
  padding: 12px 10px !important;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
  font-size: 14px !important;
}

.tab-pane .row[style*="border-left"]:hover,
.tab-content .row[style*="border-left"]:hover,
div[style*="border-left:3px solid"]:hover,
div[style*="border-left: 3px solid"]:hover {
  background: #f0f9ff !important;
  box-shadow: 0 3px 12px rgba(15,154,252,.12) !important;
}

/* ── 9. CARDS DE UNIDADES (#secao_jb) ────────────────────────── */
#secao_jb {
  border-radius: 16px !important;
  padding: 26px 20px !important;
  margin: 10px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.09) !important;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

#secao_jb::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0f9afc, #2ac9e5);
}

#secao_jb:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.14) !important;
}

/* ── 10. BOTÕES GERAIS ───────────────────────────────────────── */
.jb_botao_sessao {
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.2s !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.jb_botao_sessao:hover { opacity: 0.88; transform: scale(1.02); text-decoration: none !important; }

.btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: opacity 0.18s, transform 0.18s !important;
  padding: 8px 16px !important;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-default {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600;
  padding: 6px 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  background: #f8fafc !important;
  transition: all 0.18s !important;
}
.btn-default:hover {
  background: #e0f2fe !important;
  border-color: #0f9afc !important;
  color: #0369a1 !important;
}

/* ── 11. DESIGN MODERNO — CSS VARIABLES SECTION ──────────────── */

/* Seção de novidades / noticias */
.section-label {
  font-size: .85rem !important;
  font-weight: 700 !important;
}

.section-title {
  font-size: 2.2rem !important;
}

/* Quick access items */
.quick-item {
  min-width: 130px !important;
  padding: 20px 22px !important;
}
.quick-item .qi-icon {
  width: 60px !important;
  height: 60px !important;
  font-size: 1.5rem !important;
}
.quick-item span {
  font-size: .9rem !important;
  font-weight: 600 !important;
}

/* News list */
.nl-badge { font-size: .75rem !important; padding: 4px 10px !important; }
.nl-meta { font-size: .82rem !important; }
.nl-title { font-size: 1rem !important; }

/* LGPD band */
.lgpd-text { font-size: 1rem !important; }
.btn-pill { font-size: .9rem !important; padding: 10px 22px !important; }

/* Tab titles */
.tabs-modern h3.campanhaTitulo { font-size: 1.15rem !important; }
.tabs-modern .nav-tabs > li > a { font-size: .88rem !important; padding: 14px 18px !important; }

/* Doc rows */
.doc-row { padding: 12px 14px !important; margin-bottom: 8px !important; }
.doc-title { font-size: 14px !important; }
.doc-meta { font-size: 12.5px !important; }
.btn-view { font-size: 13px !important; padding: 6px 14px !important; }

/* Licitações cards */
.licit-card { padding: 20px !important; }
.licit-card h4 { font-size: 15px !important; }
.licit-card p { font-size: 13px !important; }
.lc-badge { font-size: 12px !important; padding: 4px 12px !important; }
.lc-date { font-size: 13px !important; }

/* Unidades cards */
.unidade-card { min-height: 190px !important; padding: 32px 24px !important; }
.uc-icon { width: 68px !important; height: 68px !important; font-size: 1.8rem !important; }
.unidade-card span { font-size: 1rem !important; }

/* Outline buttons */
.btn-outline-c1, .btn-outline-primary-custom {
  font-size: .9rem !important;
  padding: 11px 26px !important;
}
.btn-outline-white {
  font-size: .9rem !important;
  padding: 11px 26px !important;
}

/* ── 12. PAGINAÇÃO ───────────────────────────────────────────── */
.pagination { margin: 18px 0 !important; display: flex; flex-wrap: wrap; gap: 4px; }
.pagination > li > a,
.pagination > li > span {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 7px !important;
  font-weight: 600;
  font-size: 14px;
  min-width: 38px;
  text-align: center;
  padding: 7px 11px;
  transition: all 0.18s !important;
  color: #475569;
  background: #fff !important;
}
.pagination > li > a:hover {
  background: #e0f2fe !important;
  border-color: #0f9afc !important;
  color: #0369a1 !important;
}

/* ── 13. TABELAS ─────────────────────────────────────────────── */
.table { font-size: 14px; background: #fff; }
.table thead > tr > th {
  font-size: 12px;
  letter-spacing: 0.8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 14px 12px;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  background: #f8fafc;
  color: #64748b;
}
.table-responsive,
.table-bordered {
  border-top: 3px solid #0f9afc !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.table tbody > tr > td {
  vertical-align: middle !important;
  padding: 13px 12px;
  border-top: 1px solid #f1f5f9 !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f8fafc !important; }
.table-hover > tbody > tr:hover { background-color: #e0f2fe !important; }

/* ── 14. FORMULÁRIOS ─────────────────────────────────────────── */
.form-control {
  border-radius: 8px !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: none !important;
  font-size: 14px;
  padding: 10px 15px;
  height: auto !important;
  color: #334155;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(15,154,252,.15) !important;
  border-color: #0f9afc !important;
  outline: none !important;
}

/* ── 15. RODAPÉ ──────────────────────────────────────────────── */
#CaixaBottom {
  border-radius: 16px !important;
  padding: 24px 20px !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #0f9afc, #2ac9e5) 1 !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.10) !important;
}

#TituloBottom {
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 16px !important;
}

.p-bottom { font-size: 13px; line-height: 1.5; margin-top: 5px; text-align: center; }
.i-obra { display: flex; justify-content: center; margin-bottom: 8px; }
.i-obra img { width: 42px !important; height: 42px !important; object-fit: contain; }

#CardBottom a, .card3 a {
  font-size: 13px;
  line-height: 2.1;
  text-decoration: none !important;
  opacity: 0.88;
  transition: opacity 0.2s;
}
#CardBottom a:hover, .card3 a:hover { opacity: 1; text-decoration: underline !important; }
#CardBottom strong p, .card3 strong p {
  font-size: 11.5px !important;
  letter-spacing: 1.2px;
  opacity: 0.5;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: 700;
}

footer#footer h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
footer#footer p { font-size: 13px; line-height: 1.9; }
footer#footer a { font-size: 13px; text-decoration: none !important; transition: opacity 0.2s; }
footer#footer a:hover { opacity: 0.82; text-decoration: underline !important; }

/* ── 16. REDES SOCIAIS ───────────────────────────────────────── */
.redesocial {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px;
  margin: 0 4px;
  transition: transform 0.2s, opacity 0.2s !important;
}
.redesocial:hover { transform: scale(1.14) !important; opacity: 0.85 !important; }

/* ── 17. NOTÍCIAS SIDEBAR ────────────────────────────────────── */
.data_h4, h4.data_h4 { font-size: 1.05rem !important; }
.LinkInforma, a.LinkInforma { font-size: 15px !important; line-height: 1.6; }
.LinhaInforma {
  border: none !important;
  border-top: 1px solid #f0f4f8 !important;
  width: 90% !important;
  margin: 0 auto !important;
}

/* ── 18. TÍTULOS DE SEÇÃO (#titulo_sessao) ───────────────────── */
#titulo_sessao {
  font-size: 2.4rem !important;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* ── 19. MODAL ───────────────────────────────────────────────── */
.modal-content {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid #f1f5f9 !important; padding: 20px 24px !important; }
.modal-title { font-size: 1.1rem !important; font-weight: 700; }
.modal-body { font-size: 15px !important; padding: 20px 24px !important; }
.modal-footer { border-top: 1px solid #f1f5f9 !important; padding: 16px 24px !important; }

/* ── 20. ALERTS / PANELS ──────────────────────────────────────── */
.alert {
  border-radius: 10px !important;
  border: none !important;
  border-left: 4px solid #0f9afc !important;
  font-size: 15px;
  padding: 14px 18px;
  background: #e0f2fe;
  color: #0369a1;
}
.alert-success { border-left-color: #10b981 !important; background: #d1fae5 !important; color: #065f46 !important; }
.alert-danger   { border-left-color: #ef4444 !important; background: #fee2e2 !important; color: #991b1b !important; }
.alert-warning  { border-left-color: #f59e0b !important; background: #fef3c7 !important; color: #92400e !important; }

/* ── 21. FOCO / ACESSIBILIDADE ───────────────────────────────── */
a:focus, button:focus, .btn:focus, input:focus, select:focus, .form-control:focus {
  outline: 2px solid rgba(15,154,252,.5) !important;
  outline-offset: 2px;
}

/* ── 22. CAROUSEL DE NOTÍCIAS (img) ──────────────────────────── */
.img_carousel { min-height: 420px; object-fit: cover; }
.carousel-caption h3 { font-size: 1.2rem !important; font-weight: 700; }
.carousel-caption p { font-size: .92rem !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVIDADE
══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .navbar-default .navbar-nav > li > a {
    font-size: 12px !important;
    padding: 10px 10px !important;
  }
  .section-title { font-size: 1.8rem !important; }
  .quick-item { min-width: 110px !important; padding: 16px 14px !important; }
  #secao_jb { padding: 20px 14px !important; margin: 7px !important; }
}

/* Mobile */
@media (max-width: 767px) {
  body { font-size: 16px; }

  .nomefora { display: none !important; }
  #top-bar .top-number p { font-size: 13px; }
  #logo-top-bar { padding: 12px !important; }

  .navbar-default .navbar-nav > li > a {
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
  }
  .dropdown-menu {
    border-image: none !important;
    border-top: 2px solid rgba(255,255,255,.2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 10px !important;
  }
  .dropdown-menu > li > a { font-size: 13.5px !important; }

  #main-slider .item img { max-height: 220px; object-fit: cover; }

  .section-title { font-size: 1.65rem !important; }
  #titulo_sessao { font-size: 1.9rem !important; }

  .quick-item { min-width: 96px !important; padding: 13px 10px !important; }
  .quick-item .qi-icon { width: 50px !important; height: 50px !important; font-size: 1.3rem !important; }
  .quick-item span { font-size: .82rem !important; }

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 6px;
    border-radius: 8px 8px 0 0;
  }
  .nav-tabs > li { display: inline-block; float: none; }
  .nav-tabs > li > a {
    font-size: 12.5px !important;
    padding: 10px 14px !important;
    white-space: nowrap;
  }

  .doc-row { padding: 12px 14px !important; }
  .doc-title { font-size: .9rem !important; }

  .licit-card { padding: 18px !important; }
  .unidade-card { min-height: 150px !important; padding: 24px 16px !important; }

  #secao_jb { margin: 6px 4px !important; padding: 18px 14px !important; border-radius: 12px !important; }
  .jb_botao_sessao { min-width: 100% !important; width: 100% !important; margin: 0 !important; }
  .btn-default { display: block; width: 100%; margin-top: 10px; text-align: center; }

  .table thead > tr > th { font-size: 11px; padding: 9px 7px; }
  .table tbody > tr > td { font-size: 13px; padding: 9px 7px; }

  #CaixaBottom { margin-top: 22px; }
  .card3 { margin-bottom: 18px !important; }

  .pagination > li > a, .pagination > li > span {
    min-width: 34px; padding: 6px 9px; font-size: 13.5px;
  }

  h1 { font-size: 26px !important; }
  #EsOv { font-size: 12.5px !important; padding: 6px 11px !important; margin: 2px !important; }
}

/* Mobile pequeno */
@media (max-width: 420px) {
  .quick-item { min-width: 82px !important; }
  .quick-item .qi-icon { width: 44px !important; height: 44px !important; font-size: 1.15rem !important; }
  .unidade-card span { font-size: .88rem !important; }
}

/* Print */
@media print {
  #header, footer#footer, .navbar, #top-bar,
  .redesocial, #barra_cores, .pagination, #transp { display: none !important; }
  body { font-size: 12pt; background: #fff !important; color: #000; }
  .tab-content { box-shadow: none !important; }
}