/* css/estilos.css */
    :root {
        --azul: #1E88E5;
        --naranja: #f50000;
        --verde: #43A047;
        --amarillo: #FFB300;
        --oscuro: #263238;
        --fondo: #f4f7f6;
    }

    body { 
        font-family: 'Poppins', sans-serif; 
        background-color: var(--fondo); 
        padding-top: 85px; /* Aumentado un poco para compensar la barra nueva */
        padding-bottom: 90px !important;
    }

    /* Busca y reemplaza estas clases en tu <style> */

		.navbar-custom {
			background-color: rgba(255, 255, 255, 0.95);
			backdrop-filter: blur(10px);
			border-bottom: 1px solid rgba(0,0,0,0.05);
			box-shadow: 0 4px 30px rgba(0,0,0,0.03);
			padding-bottom: 0 !important; 
			display: flex;
			flex-wrap: wrap; /* Permite que la barra baje a la siguiente línea */
		}

		.top-stripe-bottom { 
			display: flex; 
			height: 6px; 
			width: 100%; 
			position: relative;
			margin-top: 5px;
			flex-basis: 100%; /* FUERZA a que ocupe todo el ancho y baje */
		}
    .stripe-1 { flex: 1; background-color: var(--verde); }
    .stripe-2 { flex: 1; background-color: var(--azul); }
    .stripe-3 { flex: 1; background-color: var(--naranja); }
    .stripe-4 { flex: 1; background-color: var(--amarillo); }

    /* Cards de Noticias (Dise?o Minimalista) */
    .card-noticia {
        border: none;
        border-radius: 24px;   
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: white;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        animation: fadeInPage 0.8s ease forwards;
    }

    .card-noticia:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    }

    .card-img-top {
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: top;
        display: block; 
    }

    .card-body {
        padding: 1.5rem !important; /* Padding uniforme en todos los lados */
    }

    .card-noticia h5 {
        margin-top: 0.2rem;
        line-height: 1.3;
    }

    /* Bot¨®n Leer M¨¢s */
    .btn-read-more {
        background: #f0f3f5;
        color: var(--azul);
        border-radius: 12px;
        padding: 10px 16px;
        font-size: 0.85rem;
        transition: all 0.2s;
    }

    .btn-read-more:hover {
        background: var(--azul);
        color: white;
    }

    /* Otros componentes */
    .date-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.9);
        padding: 5px 12px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--verde);
    }

    .emergencia-item {
        background: white;
        padding: 20px;
        border-radius: 20px;
        text-align: center;
        border-bottom: 4px solid transparent;
        transition: all 0.3s ease;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    }

    .emergencia-item:hover {
        border-bottom-color: var(--naranja);
        background: #fff8f2;
    }

    .emergencia-numero {
        font-size: 2.3rem;
        font-weight: 700;
        color: var(--naranja);
    }

    @keyframes fadeInPage { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    /* Navegaci¨®n Inferior (M¨®vil) */
    .bottom-nav {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 75px;
        background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(15px);
        display: flex; justify-content: space-around; align-items: center;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.08); z-index: 1030;
        border-radius: 24px 24px 0 0;
    }

    .nav-btn { text-decoration: none; color: #a0a0a0; text-align: center; flex: 1; display: flex; flex-direction: column; font-size: 0.7rem; font-weight: 600; }
    .nav-btn i { font-size: 1.6rem; margin-bottom: 2px; }
    .nav-btn.active { color: var(--verde); }

    @media (max-width: 991px) { .bottom-nav { display: flex !important; } }
    /* 1. Ajuste del menú en PC: evita que los ítems toquen el borde */
		@media (min-width: 992px) {
			.navbar-nav {
				margin-right: 2rem; /* Separa los links del logo y botones derecha */
			}
			.nav-link {
				padding: 0.5rem 1rem !important; /* Más espacio entre botones del menú */
				transition: color 0.3s;
			}
			.nav-link:hover {
				color: var(--verde) !important;
			}
		}

		/* 2. Fix de la barra multicolor: Cambiamos de absolute a relativo para que empuje el contenido */
		.navbar-custom {
			padding-bottom: 0 !important; /* Eliminamos el padding manual */
		}

		.top-stripe-bottom { 
			display: flex; 
			height: 6px; 
			width: 100%; 
			position: relative; /* Cambiado de absolute a relative */
			margin-top: 5px;    /* Separa la barra del logo/menú */
		}

		/* 3. Ajuste del cuerpo para que no se pegue al título "Hola, Oscar" */
		body { 
			font-family: 'Poppins', sans-serif; 
			background-color: var(--fondo); 
			padding-top: 115px; /* Aumentado para que el título respire en PC */
			padding-bottom: 90px !important;
		}
		
		.row.mb-4.align-items-center {
			margin-top: -10px; /* Margen negativo suave para ganar espacio hacia arriba */
			margin-bottom: 1.5rem !important; /* Reducimos el margen de abajo también */
		}

		/* 4. Estilo para el texto del logo (evita que se vea gigante en PC) */
		@media (min-width: 992px) {
			.muni-logo-text span {
				font-size: 1.5rem !important; /* Un poco más pequeño en PC para balancear */
			}
		}

	/* 3. Eliminamos el margen superior de la fila donde está el saludo */
		main.container {
			padding-top: 0 !important;
		}

    /* Banner Instalaci¨®n PWA */
    #install-banner {
        display: none; position: fixed; bottom: 90px; left: 15px; right: 15px; 
        background: white; padding: 18px; border-radius: 24px; 
        box-shadow: 0 15px 40px rgba(0,0,0,0.2); z-index: 2000; 
        border-left: 6px solid var(--verde); animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
	
	
	/* Forzar hamburguesa negra, gruesa y visible */
		.navbar-toggler {
			border: none !important;
			padding: 4px !important;
		}

		.navbar-toggler-icon {
			/* SVG con stroke-width aumentado a 3 para más grosor y color negro puro */
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
			width: 28px !important;
			height: 28px !important;
		}

		/* Evitar que Bootstrap le ponga opacidad al pasar el dedo */
		.navbar-toggler:focus,
		.navbar-toggler:active {
			box-shadow: none !important;
			outline: none !important;
		}

/* --- DISEÑO DE TARJETA DE PERFIL --- */
.profile-card {
    background: white;
    border-radius: 28px;
    padding: 30px 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin-top: 20px;
    border: 1px solid rgba(0,0,0,0.02);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--verde), #81c784);
    color: white;
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(67, 160, 71, 0.3);
}

.info-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 12px;
    background: #f8faf9;
    border-radius: 18px;
    transition: all 0.3s ease;
}

.info-item:hover {
    background: #f0f4f2;
    transform: translateX(5px);
}

.info-item i {
    font-size: 1.4rem;
    color: var(--verde);
    margin-right: 15px;
    width: 40px;
    height: 40px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.03);
}

.info-label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.info-value {
    display: block;
    font-size: 0.95rem;
    color: var(--oscuro);
    font-weight: 600;
}