/* ============================================================
   ESTILOS ESPECÍFICOS PARA MÓVILES - VERSIÓN FINAL
   ============================================================ */

/* ── BREAKPOINT: MÓVILES (≤ 768px) ───────────────────────────── */
@media (max-width: 768px) {
  
  /* ── CONTENEDOR PRINCIPAL ───────────────────────────────────── */
  .container-fluid {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* ── NAVBAR ──────────────────────────────────────────────────── */
  .mv-navbar-content {
    height: auto !important;
    min-height: 44px !important;
    padding: 4px 6px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .mv-logo-group {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }

  .mv-logo-group .mv-logo {
    height: 28px !important;
    padding: 2px !important;
  }

  .home-button {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.6rem !important;
  }

  .mv-title-wrap {
    flex: 1 1 100% !important;
    justify-content: center !important;
    order: 3 !important;
  }

  .mv-title-wrap h1,
  .mv-title-wrap h2,
  .mv-title-wrap h3,
  .mv-title,
  .mv-title * {
    font-size: 14px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .mv-badge {
    font-size: 0.4rem !important;
    padding: 0.05rem 0.4rem !important;
  }

  .mv-rightbox {
    flex: 0 0 auto !important;
    gap: 4px !important;
  }

  .mv-datetime {
    font-size: 0.5rem !important;
    padding: 0.05rem 0.4rem !important;
  }

  .mv-rightbox .mv-logo {
    height: 28px !important;
    padding: 2px !important;
  }

  /* ── BANDAS ──────────────────────────────────────────────────── */
  .gov-banner {
    font-size: 0.5rem !important;
    padding: 0.2rem 0 !important;
  }

  .colombia-banner {
    font-size: 0.5rem !important;
    padding: 0.25rem !important;
  }

  .flag-banner-gov {
    height: 3px !important;
  }

  /* ── INFO BANNER ────────────────────────────────────────────── */
  .info-banner {
    font-size: 0.55rem !important;
    padding: 4px 8px !important;
  }

  .info-banner-content {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .info-banner-content span {
    font-size: 0.5rem !important;
    text-align: center !important;
  }

  .info-banner-close {
    font-size: 0.8rem !important;
    padding: 2px 4px !important;
  }

  /* ── TIME DISPLAY ───────────────────────────────────────────── */
  .time-display-gov {
    font-size: 0.6rem !important;
    padding: 0.3rem 0.5rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }

  .time-display-gov .d-flex:first-child {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .time-display-gov .d-flex:first-child > div {
    font-size: 0.55rem !important;
  }

  .visit-badge-gov {
    font-size: 0.5rem !important;
    padding: 1px 8px !important;
  }

  .time-display-gov .d-flex.gap-2 {
    justify-content: center !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ BOTONES DE ACCIÓN CON COLORES (SOLO MÓVIL) ★★
     ══════════════════════════════════════════════════════════════ */
  
  .btn-gov {
    font-size: 0.5rem !important;
    padding: 0.2rem 0.4rem !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }

  .btn-gov-danger {
    background: #b22222 !important;
    color: #ffffff !important;
    border: none !important;
  }
  .btn-gov-danger:hover {
    background: #8b1a1a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(178, 34, 34, 0.3) !important;
  }

  .btn-gov-warning {
    background: #b8860b !important;
    color: #ffffff !important;
    border: none !important;
  }
  .btn-gov-warning:hover {
    background: #8b6914 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3) !important;
  }

  .btn-gov-primary {
    background: #003366 !important;
    color: #ffffff !important;
    border: none !important;
  }
  .btn-gov-primary:hover {
    background: #002244 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3) !important;
  }

  .btn-gov-outline {
    background: #6c757d !important;
    color: #ffffff !important;
    border: 1.5px solid #5a6268 !important;
  }
  .btn-gov-outline:hover {
    background: #5a6268 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3) !important;
  }

  .btn-rastreador-gov {
    background: #003366 !important;
    color: #ffffff !important;
    font-size: 0.5rem !important;
    padding: 0.2rem 0.5rem !important;
    min-height: 32px !important;
    border-radius: 6px !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }
  .btn-rastreador-gov:hover {
    background: #002244 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3) !important;
  }

  .time-display-gov .row.g-2 {
    --bs-gutter-y: 0.25rem !important;
    --bs-gutter-x: 0.25rem !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ CRUCES OPERANDO Y APAGADOS EN UNA SOLA FILA ★★
     ══════════════════════════════════════════════════════════════ */

  .row.g-3.mb-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 !important;
    width: 100% !important;
  }

  .row.g-3.mb-3 > .col-md-3:first-child {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 1 !important;
  }

  .row.g-3.mb-3 > .col-md-3:last-child {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 2 !important;
  }

  .row.g-3.mb-3 > .col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    order: 3 !important;
    margin-top: 4px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ ESTADÍSTICAS - CÍRCULO Y PORCENTAJE CENTRADOS ★★
     ══════════════════════════════════════════════════════════════ */

  .stats-gov-box {
    padding: 0.5rem 0.4rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 95px !important;
    border-radius: 6px !important;
    width: 100% !important;
  }

  /* Contenedor principal del número + semáforo + círculo */
  .stats-gov-box .d-flex.align-items-center.justify-content-between {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Grupo: número + semáforo */
  .stats-gov-box .d-flex.align-items-center.gap-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .stat-gov-number {
    font-size: 1.8rem !important;
    text-align: center !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    min-width: 45px !important;
  }

  .stat-gov-label {
    font-size: 0.6rem !important;
    text-align: center !important;
    width: 100% !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }

  .semaforo-img-gov {
    width: 35px !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  /* ── CÍRCULO DE PORCENTAJE - CENTRADO ────────────────────── */
  .progress-ring-gov {
    width: 55px !important;
    height: 55px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .progress-ring-gov svg {
    width: 55px !important;
    height: 55px !important;
    display: block !important;
  }

  .progress-ring-gov circle {
    fill: none !important;
    stroke-width: 5 !important;
    stroke-linecap: round !important;
  }

  .progress-ring-gov .bg {
    stroke: rgba(0,0,0,0.08) !important;
  }

  .progress-ring-gov .text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .progress-ring-gov .text.success {
    color: #1a7a4a !important;
  }

  .progress-ring-gov .text.danger {
    color: #b22222 !important;
  }

  .stats-gov-box .text-muted.small {
    text-align: center !important;
    width: 100% !important;
    font-size: 0.5rem !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ KPI CARDS - MÁS GRANDES ★★
     ══════════════════════════════════════════════════════════════ */

  .row.g-2.h-100 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .row.g-2.h-100 > .col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .kpi-gov {
    min-height: 72px !important;
    padding: 0.35rem 0.15rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    border-bottom-width: 3px !important;
    border-radius: 6px !important;
  }

  .kpi-gov .icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.6rem !important;
    margin-bottom: 2px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }

  .kpi-gov .value {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    width: 100% !important;
    font-weight: 800 !important;
  }

  .kpi-gov .label {
    font-size: 0.5rem !important;
    text-align: center !important;
    width: 100% !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
  }

  .kpi-gov .ver-lista-tag {
    font-size: 0.35rem !important;
    top: 2px !important;
    right: 3px !important;
    font-weight: 700 !important;
  }

  .kpi-gov.ultimo-evento {
    min-height: 72px !important;
    padding: 0.35rem 0.15rem !important;
  }

  .kpi-gov.ultimo-evento .value {
    font-size: 0.65rem !important;
  }

  .kpi-gov.ultimo-evento .label {
    font-size: 0.5rem !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ ANALÍTICA INTELIGENTE - 2 FILAS × 3 COLUMNAS ★★
     ══════════════════════════════════════════════════════════════ */

  .card-gov-body .row.g-2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .card-gov-body .row.g-2 > .col-6,
  .card-gov-body .row.g-2 > .col-md-2 {
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
    min-width: 0 !important;
  }

  /* Ocupa las 6 posiciones en 2 filas × 3 columnas */
  .card-gov-body .row.g-2 > .col-6:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; }
  .card-gov-body .row.g-2 > .col-6:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }
  .card-gov-body .row.g-2 > .col-6:nth-child(3) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .card-gov-body .row.g-2 > .col-6:nth-child(4) { grid-column: 1 / 2; grid-row: 2 / 3; }
  .card-gov-body .row.g-2 > .col-6:nth-child(5) { grid-column: 2 / 3; grid-row: 2 / 3; }
  .card-gov-body .row.g-2 > .col-6:nth-child(6) { grid-column: 3 / 4; grid-row: 2 / 3; }

  .card-gov-body .row.g-2 .kpi-gov {
    min-height: 65px !important;
    padding: 0.3rem 0.15rem !important;
    border-bottom-width: 3px !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .value {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .label {
    font-size: 0.48rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .small.text-muted {
    font-size: 0.38rem !important;
    font-weight: 500 !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.5rem !important;
    margin-bottom: 2px !important;
  }

  /* ── CARDS ───────────────────────────────────────────────────── */
  .card-gov-header {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  .card-gov-body {
    padding: 0.6rem 0.6rem !important;
  }

  /* ══════════════════════════════════════════════════════════════
     ★★ FOTO DEL EVENTO DE VANDALISMO ★★
     ══════════════════════════════════════════════════════════════ */

  #api-v-carousel-inner {
    min-height: 180px !important;
    max-height: 220px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #1a1a2e !important;
  }

  #api-v-carousel-inner .carousel-item {
    height: 100% !important;
    min-height: 180px !important;
  }

  #api-v-carousel-inner img {
    width: 100% !important;
    height: 100% !important;
    min-height: 180px !important;
    max-height: 220px !important;
    object-fit: contain !important;
    background: #1a1a2e !important;
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 10% !important;
    opacity: 0.7 !important;
  }

  .carousel-control-prev:hover,
  .carousel-control-next:hover {
    opacity: 1 !important;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 2rem !important;
    height: 2rem !important;
    background-size: 60% !important;
  }

  #map-vandalismo {
    min-height: 180px !important;
    max-height: 220px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-light) !important;
    overflow: hidden !important;
  }

  #api-v-direccion {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
  }

  #api-v-descripcion {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }

  #api-v-fecha {
    font-size: 0.55rem !important;
  }

  #api-v-causa {
    font-size: 0.5rem !important;
    padding: 2px 8px !important;
  }

  .display-5 {
    font-size: 2rem !important;
    font-weight: 700 !important;
  }

  /* ── GRÁFICOS ANALÍTICA ────────────────────────────────────── */
  .card-gov-body .row.mt-3.g-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .card-gov-body .row.mt-3.g-3 > .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #chart-responsables {
    max-width: 80px !important;
    max-height: 80px !important;
  }

  .resp-legend {
    font-size: 0.55rem !important;
  }

  .resp-legend .mb-1 {
    margin-bottom: 2px !important;
    font-size: 0.5rem !important;
  }

  .resp-legend span {
    width: 10px !important;
    height: 10px !important;
    margin-right: 3px !important;
  }

  /* ── TABLAS ──────────────────────────────────────────────────── */
  .table-gov {
    font-size: 0.6rem !important;
  }

  .table-gov thead th {
    font-size: 0.5rem !important;
    padding: 0.3rem 0.3rem !important;
  }

  .table-gov tbody td {
    padding: 0.3rem 0.3rem !important;
    font-size: 0.55rem !important;
  }

  .table-gov tbody td .badge {
    font-size: 0.45rem !important;
    padding: 2px 6px !important;
  }

  /* ── TENDENCIA 30 DÍAS ──────────────────────────────────────── */
  .card-gov-body > div[style*="height:220px"] {
    height: 150px !important;
  }

  /* ── TABLAS DE DETALLE (3 COLUMNAS) ────────────────────────── */
  .row.g-3.mb-4 > .col-xl-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .card-gov-body[style*="height:360px"] {
    height: 240px !important;
  }

  /* ── MODALES ─────────────────────────────────────────────────── */
  .modal-gov .modal-header {
    padding: 0.4rem 0.8rem !important;
  }

  .modal-gov .modal-header h5 {
    font-size: 0.75rem !important;
  }

  .modal-gov .modal-body {
    padding: 0.3rem !important;
  }

  .modal-gov .modal-footer {
    padding: 0.3rem !important;
  }

  .modal-gov .modal-footer .btn-gov {
    font-size: 0.5rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  /* ── FOOTER ──────────────────────────────────────────────────── */
  .developer-footer {
    font-size: 0.55rem !important;
    padding: 0.6rem 0.8rem !important;
  }

  .dev-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .dev-avatar {
    width: 28px !important;
    height: 28px !important;
  }

  .dev-info strong {
    font-size: 0.5rem !important;
  }

  .dev-copyright {
    font-size: 0.4rem !important;
  }

  .dev-links a {
    font-size: 0.45rem !important;
    margin: 0 0.2rem !important;
  }

  /* ── CHATBOT ─────────────────────────────────────────────────── */
  .bot-img-gov {
    width: 36px !important;
    height: 36px !important;
  }

  .bot-badge-gov {
    font-size: 0.4rem !important;
    padding: 1px 6px !important;
  }

  #movilab-chat-window {
    width: 180px !important;
    bottom: 60px !important;
    right: 8px !important;
  }

  .chat-header-gov {
    font-size: 0.55rem !important;
    padding: 4px 8px !important;
  }

  .chat-body-gov {
    font-size: 0.55rem !important;
    padding: 8px !important;
  }

  .chat-footer-gov {
    font-size: 0.4rem !important;
    padding: 2px 8px !important;
  }
}

/* ── BREAKPOINT: MÓVILES MUY PEQUEÑOS (≤ 450px) ──────────────── */
@media (max-width: 450px) {
  
  .row.g-2.h-100 {
    gap: 4px !important;
  }

  .card-gov-body .row.g-2 {
    gap: 4px !important;
  }

  .kpi-gov {
    min-height: 60px !important;
    padding: 0.25rem 0.1rem !important;
  }

  .kpi-gov .value {
    font-size: 0.9rem !important;
  }

  .kpi-gov .label {
    font-size: 0.42rem !important;
  }

  .kpi-gov .icon {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.45rem !important;
  }

  .card-gov-body .row.g-2 .kpi-gov {
    min-height: 55px !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .value {
    font-size: 0.8rem !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .label {
    font-size: 0.4rem !important;
  }

  .card-gov-body .row.g-2 .kpi-gov .icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 0.4rem !important;
  }

  .stats-gov-box .d-flex.align-items-center {
    gap: 4px !important;
  }

  .stat-gov-number {
    font-size: 1.4rem !important;
    min-width: 35px !important;
  }

  .semaforo-img-gov {
    width: 28px !important;
  }

  .progress-ring-gov {
    width: 45px !important;
    height: 45px !important;
  }

  .progress-ring-gov svg {
    width: 45px !important;
    height: 45px !important;
  }

  .progress-ring-gov .text {
    font-size: 0.7rem !important;
  }

  .btn-gov {
    font-size: 0.4rem !important;
    padding: 0.15rem 0.25rem !important;
    min-height: 26px !important;
  }

  .btn-rastreador-gov {
    font-size: 0.4rem !important;
    padding: 0.15rem 0.3rem !important;
    min-height: 26px !important;
  }

  #api-v-carousel-inner {
    min-height: 140px !important;
    max-height: 180px !important;
  }

  #api-v-carousel-inner .carousel-item {
    min-height: 140px !important;
  }

  #api-v-carousel-inner img {
    min-height: 140px !important;
    max-height: 180px !important;
  }

  #map-vandalismo {
    min-height: 140px !important;
    max-height: 180px !important;
  }

  .display-5 {
    font-size: 1.6rem !important;
  }
}

/* ── ORIENTACIÓN HORIZONTAL EN MÓVILES ────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  
  .mv-navbar-content {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 2px 6px !important;
  }

  .mv-title-wrap {
    flex: 1 !important;
    order: 0 !important;
  }

  .mv-title-wrap h1,
  .mv-title-wrap h2,
  .mv-title-wrap h3,
  .mv-title,
  .mv-title * {
    font-size: 12px !important;
  }

  .mv-logo-group .mv-logo {
    height: 24px !important;
  }

  .mv-rightbox .mv-logo {
    height: 24px !important;
  }

  .row.g-2.h-100 {
    flex-wrap: nowrap !important;
  }

  .card-gov-body .row.g-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }

  .card-gov-body .row.g-2 > .col-6,
  .card-gov-body .row.g-2 > .col-md-2 {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .kpi-gov {
    min-height: 45px !important;
  }

  .kpi-gov .value {
    font-size: 0.7rem !important;
  }

  .kpi-gov .label {
    font-size: 0.38rem !important;
  }

  .row.g-3.mb-3 > .col-md-3:first-child,
  .row.g-3.mb-3 > .col-md-3:last-child {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
  }

  .stats-gov-box {
    min-height: 70px !important;
  }

  .stat-gov-number {
    font-size: 1.4rem !important;
  }

  .semaforo-img-gov {
    width: 28px !important;
  }

  .progress-ring-gov {
    width: 42px !important;
    height: 42px !important;
  }

  .progress-ring-gov svg {
    width: 42px !important;
    height: 42px !important;
  }

  .progress-ring-gov .text {
    font-size: 0.65rem !important;
  }

  #api-v-carousel-inner {
    min-height: 140px !important;
    max-height: 180px !important;
  }

  #api-v-carousel-inner img {
    min-height: 140px !important;
    max-height: 180px !important;
  }

  #map-vandalismo {
    min-height: 140px !important;
    max-height: 180px !important;
  }
}

/* ── PANTALLAS ENTRE 769px Y 991px (TABLETS) ─────────────────── */
@media (min-width: 769px) and (max-width: 991px) {
  
  .row.g-2.h-100 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .row.g-2.h-100 > .col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .card-gov-body .row.g-2 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .card-gov-body .row.g-2 > .col-6,
  .card-gov-body .row.g-2 > .col-md-2 {
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .kpi-gov {
    min-height: 70px !important;
    padding: 0.35rem 0.2rem !important;
  }

  .kpi-gov .value {
    font-size: 0.9rem !important;
  }

  .kpi-gov .label {
    font-size: 0.45rem !important;
  }

  .kpi-gov .icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.55rem !important;
  }
}