/*=========================================
CENTRO DE CONTROL MUNICIPAL
Autor: Ing. Ayrton Nigel Alborta Flores
=========================================*/

:root{

    --rojo:#8B1E24;
    --rojo2:#B71C1C;
    --rojo3:#D32F2F;

    --dorado:#C8A64D;

    --gris:#263238;
    --gris2:#455A64;
    --gris3:#607D8B;

    --fondo:#F3F5F7;

    --blanco:#ffffff;

    --shadow:0 12px 35px rgba(0,0,0,.18);

}

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

html,
body{

    height:100%;
    font-family:'Segoe UI',sans-serif;
    background:var(--fondo);
    overflow:hidden;

}

/*==========================
HEADER
==========================*/

.topbar{

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:110px;

    background:linear-gradient(135deg,#6F1218,#8B1E24,#B71C1C);

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 30px;

    z-index:1200;

    box-shadow:0 5px 18px rgba(0,0,0,.30);

}
.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.logo-municipio {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

.header-right {
  text-align: right;
  font-size: 14px;
  font-weight: 600;
}

.status {
  background: rgba(255,255,255,.14);
  padding: 8px 16px;
  border-radius: 30px;
  margin-bottom: 8px;
}

.online {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #00E676;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 12px #00E676;
}

.gestion {
  color: #f7e6a1;
  font-weight: 800;
}

.topbar h1{

    font-size:30px;

    font-weight:800;

    letter-spacing:.5px;

}

.topbar p{

    opacity:.92;

    font-size:14px;

    margin-top:4px;

}

.etiqueta{

    display:inline-block;

    background:rgba(255,255,255,.15);

    padding:5px 12px;

    border-radius:30px;

    font-size:12px;

    margin-bottom:8px;

}

.brand{

    text-align:right;

    font-size:14px;

    font-weight:600;

}

/*==========================
KPI
==========================*/

.kpis{
    position:absolute;

    top:120px;

    left:340px;

    right:20px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    z-index:1000;
}

.kpi{

    background:white;

    border-radius:14px;

    padding:10px 14px;

    box-shadow:var(--shadow);

    border-left:5px solid var(--rojo);

    transition:.25s;

    min-height:68px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.kpi:hover{

    transform:translateY(-4px);

}

.kpi span{

    font-size:12px;

    color:#666;

    font-weight:600;

}

.kpi strong{

    font-size:22px;

    margin-top:2px;

    font-weight:800;

}

.destacado{

    background:linear-gradient(135deg,#8B1E24,#B71C1C);

    color:white;

}

.destacado span{

    color:white;

}

.destacado strong{

    color:white;

}

/*==========================
SIDEBAR
==========================*/

.sidebar{

    position:absolute;

    left:20px;

    top:125px;

    bottom:20px;

    width:300px;

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow);

    padding:22px;

    overflow:auto;

    z-index:1100;

}

.sidebar-header{

    margin-bottom:18px;

}

.sidebar-header h5{

    font-weight:800;

    color:var(--rojo);

}

.sidebar-header small{

    color:#666;

}

/*==========================
BOTONES
==========================*/

.filter{

    width:100%;

    border:none;

    background:#F5F5F5;

    padding:13px;

    border-radius:12px;

    text-align:left;

    margin-bottom:8px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.filter:hover{

    background:var(--rojo);

    color:white;

}

.filter.active{

    background:var(--rojo);

    color:white;

}

/*==========================
FORMULARIOS
==========================*/

.form-control,
.form-select{

    border-radius:10px;

    border:1px solid #DDD;

    padding:10px;

}

/*==========================
LEYENDA
==========================*/

.leyenda{

    margin-top:18px;

}

.leyenda h6{

    margin-bottom:12px;

    color:var(--gris);

    font-weight:700;

}

.leyenda p{

    margin-bottom:10px;

    font-size:14px;

}

.dot{

    width:13px;

    height:13px;

    border-radius:50%;

    display:inline-block;

    margin-right:8px;

}

.verde{
    background:#16A34A;
}

.amarillo{
    background:#F59E0B;
}

.azul{
    background:#2563EB;
}

.naranja{
    background:#EA580C;
}

.rojo{
    background:#DC2626;
}

/*==========================
MAPA
==========================*/

#map{

    position:absolute;

    top:110px;

    left:0;

    right:0;

    bottom:0;

    z-index:1;

}

/*==========================
FOOTER
==========================*/

.footer-credit{

    position:absolute;

    bottom:12px;

    right:15px;

    background:rgba(255,255,255,.95);

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    color:#666;

    z-index:1200;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}

/*==========================
POPUP
==========================*/

.popup-title{

    font-size:18px;

    font-weight:800;

    color:var(--rojo);

}

.estado{

    padding:6px 12px;

    border-radius:30px;

    color:white;

    font-size:12px;

    font-weight:700;

}

.progress{

    height:10px;

    border-radius:20px;

}

/*==========================
SCROLL
==========================*/

::-webkit-scrollbar{

    width:7px;

}

::-webkit-scrollbar-thumb{

    background:var(--rojo);

    border-radius:20px;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:992px){

    .sidebar{

        width:280px;

    }

    .kpis{

        left:315px;

        grid-template-columns:repeat(2,1fr);

    }

}
.panel-tiempo {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tiempo-item {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  padding: 7px 12px;
  border-radius: 14px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tiempo-item strong {
  color: white;
  font-weight: 800;
  white-space: nowrap;
}

.status-bar-top {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.status-bar-top span {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  padding: 6px 10px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
}

.online {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #00E676;
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 10px #00E676;
}

.status-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 32px;
  background: rgba(38,50,56,.95);
  color: white;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 600;
}
/* =========================================================
   MARCADORES DE PROYECTOS
========================================================= */

.marcador-proyecto-contenedor {
  background: transparent;
  border: none;
}

.marcador-proyecto {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  border-radius: 50% 50% 50% 8px;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.28),
    0 0 0 2px rgba(255, 255, 255, 0.9);
  transform: rotate(-45deg);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.marcador-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transform: rotate(45deg);
}

.marcador-estado {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: rotate(45deg);
}

.marcador-proyecto:hover {
  transform:
    rotate(-45deg)
    scale(1.15);
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.35),
    0 0 0 3px rgba(255, 255, 255, 0.95);
}

/* =========================================================
   RELOJ Y CLIMA
========================================================= */

.topbar-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 7px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    color: #ffffff;
    backdrop-filter: blur(6px);
}

.info-item .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    font-size: 22px;
}

.info-item > div {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.info-item strong {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.info-item small {
    margin-top: 3px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* =========================================================
   MARCADORES DE PROYECTOS
========================================================= */

.marcador-proyecto-contenedor {
    background: transparent;
    border: none;
}

.marcador-proyecto {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid #ffffff;
    border-radius: 50% 50% 50% 0;

    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35);

    transform: rotate(-45deg);
}

.marcador-proyecto span {
    display: block;

    font-size: 18px;
    line-height: 1;

    transform: rotate(45deg);
}

.clima-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    margin-top: 5px;
    font-size: 11px;
}

.actualizacion-clima {
    display: block;
    margin-top: 4px;
    opacity: 0.7;
}

@media (max-width: 992px) {
    .topbar-info {
        gap: 6px;
    }

    .info-item {
        padding: 6px 8px;
    }

    #fechaActual,
    .clima-detalles,
    #actualizacionClima {
        display: none;
    }
}

@media (max-width: 576px) {
    .reloj-municipal {
        display: none;
    }

    .info-item strong {
        font-size: 12px;
    }

    .info-item small {
        font-size: 9px;
    }
}

@media(max-width:768px){

  .topbar{
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .header-left{
    align-items:flex-start;
  }

  .logo-municipio{
    width:64px;
    height:64px;
  }

  .header-right{
    text-align:left;
  }

  .sidebar{
    left:10px;
    right:10px;
    width:auto;
    height:300px;
    top:300px;
  }

  .kpis{
    top:155px;
    left:10px;
    right:10px;
    grid-template-columns:1fr;
  }
}