/* === OVERRIDES (cargan al final) === */

/* LOGIN: labels visibles */
.login-wrapper .login-card .field label{
  color: #0f172a !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* Subtítulo */
.login-wrapper .login-card .sub{
  color: #334155 !important;
  opacity: 1 !important;
}

/* Inputs */
.login-wrapper .login-card input{
  color: #0f172a !important;
}

.login-wrapper .login-card input::placeholder{
  color: #64748b !important;
  opacity: 1 !important;
}
/* --- Estado dot --- */
.panel-card { position: relative; }
.estado-dot{
  position:absolute;
  left:18px;
  top:22px;
  width:12px;
  height:12px;
  border-radius:50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.estado-verde{ background:#38d66b; }
.estado-amarillo{ background:#ffd54a; }
.estado-rojo{ background:#ff5a5a; }

/* Separación para que el punto no tape el texto */
.panel-card-link { display:block; padding-left:22px; }

/* --- Menú admin --- */
.menu-wrap{
  position:absolute;
  right:14px;
  top:14px;
  z-index:50;
}
.menu-btn{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
.menu{
  position:absolute;
  right:0;
  top:44px;
  min-width:200px;
  border-radius:14px;
  padding:8px;
  display:none;
  z-index:9999;
}
.menu.open{ display:block; }

.menu-item{
  width:100%;
  border:0;
  border-radius:12px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  margin:4px 0;
}
/* ===== FIX DESCUDRE: cards de municipios en /zonas/<id> ===== */

/* Card en GRID: [dot] [texto] [botón] */
.panel-card{
  position: relative;
  display: grid !important;
  grid-template-columns: 18px 1fr 56px;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  overflow: visible;
}

/* Dot ya no absoluto: se alinea solo */
.estado-dot{
  position: static !important;
  transform: none !important;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
  z-index: 2;
}

/* El link ocupa la columna central */
.panel-card-link{
  grid-column: 2;
  display: block;
  padding: 0 !important;
  text-decoration: none;
}

/* Alineación correcta del texto */
.panel-row{
  display: flex;
  align-items: baseline;
  justify-content: flex-start !important;
}

.panel-title{
  display: block;
  flex: 1;
  min-width: 0;
  text-align: left !important;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  text-overflow: ellipsis;
}

.panel-sub{
  display: block;
  text-align: left !important;
  margin-top: 6px;
  opacity: .85;
}

/* Botón ⋯ fijo en la tercera columna */
.menu-wrap{
  grid-column: 3;
  position: relative !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 50;
  justify-self: end;
}

/* Menú desplegable estable y por encima de todo */
.menu{
  position: absolute;
  right: 0;
  top: 52px;
  min-width: 210px;
  padding: 10px;
  border-radius: 16px;
  display: none;
  z-index: 9999;
}

.menu.open{ display:block; }
/* ===== Menú por encima de otras cards (evita parpadeo y clicks robados) ===== */

/* El grid (contenedor) no debe cortar overlays */
.panel-grid { overflow: visible !important; }

/* Cada card crea su propio stacking context estable */
.panel-card { position: relative; z-index: 1; overflow: visible !important; }

/* Cuando el menú esté abierto, esta card se pone por encima del resto */
.panel-card.has-open-menu { z-index: 9990 !important; }

/* El menú siempre por encima */
.menu { z-index: 9999 !important; }

/* El link no debe tapar el menú */
.panel-card-link { position: relative; z-index: 1; }

/* El bloque del menú y sus items por encima del link */
.menu-wrap, .menu-wrap * { position: relative; z-index: 9999; }
@media (max-width: 600px) {
  .topbar, .panel-topbar, .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .topbar .btn, .panel-topbar .btn, .header-actions .btn {
    flex: 1 1 auto;
  }
}

/* FIX FINAL: Dashboard panel - títulos visibles y en una sola línea */
.panel-row{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}
.panel-title{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: visible !important; /* IMPORTANTE: para que no desaparezca */
  text-overflow: clip !important;
}
.resumen-estrategico ul li {
  margin-bottom: 6px;
}
/* ===== MAPA PROVINCIA: colores por estado ===== */
#mapa-provincia svg{ width:100%; height:auto; display:block; }

#mapa-provincia .estado-verde{ fill:#1f8f63 !important; }
#mapa-provincia .estado-amarillo{ fill:#f0ad4e !important; }
#mapa-provincia .estado-rojo{ fill:#dc3545 !important; }

#mapa-provincia [id]{
  stroke: rgba(0,0,0,.35);
  stroke-width: .8;
  transition: filter .15s ease, opacity .15s ease;
}
#mapa-provincia [id]:hover{
  filter: brightness(1.15);
  opacity: .95;
}
/* MAPA PROVINCIAL */
.map-wrap{ width:100%; overflow:auto; }
.map-wrap svg{ max-width:1100px; }

#provMap [data-municipality-id]{
  fill: rgba(255,255,255,.10);
  stroke: rgba(255,255,255,.40);
  stroke-width: 1;
  transition: fill .15s ease, opacity .15s ease, stroke .15s ease;
}

#provMap .estado-verde{ fill: rgba(31,143,99,.85); }
#provMap .estado-amarillo{ fill: rgba(240,173,78,.85); }
#provMap .estado-rojo{ fill: rgba(220,53,69,.85); }
#provMap .estado-gris{ fill: rgba(255,255,255,.10); }

#provMap [data-municipality-id]:hover{
  opacity: .92;
  stroke: rgba(26,166,75,.75);
  stroke-width: 1.2;
}