/* portal.css — Portal Municipal Chachapoyas */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
    --azul:#1e4d7b;--azul-oscuro:#0d2847;--azul-claro:#2d6ba8;
    --rojo:#c41e3a;--amarillo:#ffc107;--oro:#ffd700;
    --blanco:#ffffff;--gris-claro:#f4f6f8;--gris:#e9ecef;
    --texto:#333333;--verde:#28a745;--naranja:#fd7e14;
    --radio:10px;--sombra:0 3px 15px rgba(0,0,0,0.08);
    --sombra-hover:0 8px 25px rgba(0,0,0,0.15);
    --transicion:all 0.3s ease;
    --font-titulo:'Outfit',sans-serif;--font-cuerpo:'Lato',sans-serif;
}

body{font-family:var(--font-cuerpo);background-color:var(--gris-claro);color:var(--texto);line-height:1.6}
h1,h2,h3,h4,.card h3,.section h2,.stat-number{font-family:var(--font-titulo)}

/* SKELETON */
.skeleton{display:inline-block;background:linear-gradient(90deg,#e0e0e0 25%,#efefef 50%,#e0e0e0 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s infinite ease-in-out;border-radius:4px;min-height:16px}
.skeleton-text{width:60%;height:16px}
.skeleton-title{width:40%;height:36px}
.skeleton-num{width:80px;height:40px}
@keyframes skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* SLIDER */
.slider-wrap{width:100%;height:100vh;position:relative;overflow:hidden;background:#0d2847}
.slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.8s ease; pointer-events:none; -webkit-transition:opacity 0.8s ease; -moz-transition:opacity 0.8s ease; -ms-transition:opacity 0.8s ease; -o-transition:opacity 0.8s ease; }
.slide.activo{opacity:1;pointer-events:auto}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,40,71,0.2) 0%,rgba(13,40,71,0.65) 100%)}
.slide-content{position:relative;z-index:2;text-align:center;color:white;padding:0 24px;max-width:860px}
.slide-content h2{font-family:var(--font-titulo);font-size:44px;font-weight:700;margin-bottom:16px;text-shadow:0 2px 10px rgba(0,0,0,0.3);line-height:1.2}
.slide-content p{font-size:18px;opacity:0.92;margin-bottom:28px;text-shadow:0 1px 4px rgba(0,0,0,0.3)}
.slide-btn{display:inline-block;padding:14px 36px;background:#ffd700;color:#0d2847;text-decoration:none;border-radius:8px;font-weight:700;font-size:15px;font-family:var(--font-titulo);transition:all 0.3s;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.slide-btn:hover{background:white;transform:translateY(-3px)}
.slide-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.slide-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.5);border:none;cursor:pointer;transition:all 0.3s;padding:0}
.slide-dot.activo{background:#ffd700;transform:scale(1.3)}
.slide-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.3);color:white;width:48px;height:48px;border-radius:50%;font-size:28px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all 0.3s;line-height:1}
.slide-arrow:hover{background:rgba(255,255,255,0.3);border-color:white}
.slide-prev{left:20px}
.slide-next{right:20px}

/* QUICK NAV */
.quick-nav{background:var(--blanco);padding:18px 20px;margin:0 auto 25px;max-width:1200px;border-radius:0 0 14px 14px;box-shadow:0 8px 30px rgba(0,0,0,0.1);display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.quick-nav a{padding:9px 16px;background:var(--gris);color:var(--azul);text-decoration:none;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--font-titulo);transition:var(--transicion);white-space:nowrap}
.quick-nav a:hover{background:var(--azul);color:var(--blanco);transform:translateY(-2px)}
@media(max-width:600px){
    .quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
    .quick-nav a{text-align:center;font-size:12px;padding:8px 6px}
}
@media(max-width:380px){.quick-nav{grid-template-columns:repeat(2,1fr)}}

/* MAIN */
main{max-width:1200px;margin:30px auto;padding:0 15px}

/* INTRO */
.intro{background:linear-gradient(to right,#fafbff,#fff);padding:30px;border-radius:var(--radio);box-shadow:var(--sombra);margin-bottom:35px;font-size:15px;border-left:4px solid #ffd700}
.intro strong{font-family:var(--font-titulo);font-size:17px;color:#0d2847}

/* AVISOS */
.notice-banner{background:#fffde7;border-left:5px solid #FFC107;padding:18px 20px 18px 55px;border-radius:var(--radio);font-size:14px;margin-bottom:30px;position:relative;box-shadow:var(--sombra);transition:var(--transicion)}
.aviso-icono{position:absolute;left:16px;top:16px;font-size:24px}
.aviso-titulo{font-weight:700;color:var(--azul-oscuro);margin-right:6px}
.aviso-contador{font-size:12px;color:#666;margin-left:8px;display:none}

/* SECCIONES */
.section{margin-bottom:50px;animation:fadeIn 0.6s ease-out}
.section h2{color:var(--azul-oscuro);margin-bottom:25px;font-size:26px;border-left:6px solid var(--azul);padding-left:15px;font-weight:600}
.section-header{display:flex;align-items:baseline;gap:12px;margin-bottom:25px}
.section-header h2{border:none;padding:0;margin:0;font-size:24px;font-weight:700}

/* ESTADISTICAS */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:35px}
.stat-box{background:var(--blanco);padding:25px;border-radius:var(--radio);text-align:center;box-shadow:var(--sombra);border-left:4px solid var(--azul);transition:var(--transicion)}
.stat-box:hover{transform:translateY(-4px);box-shadow:var(--sombra-hover)}
.stat-box .icon{font-size:38px;margin-bottom:10px}
.stat-number{font-size:42px;font-weight:700;color:var(--azul);display:block;margin-bottom:5px;min-height:44px;letter-spacing:-1px}
.stat-box .label{font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:#888}
.stat-actualizado{font-size:11px;color:#aaa;margin-top:6px;display:block}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}
.card{background:var(--blanco);border-radius:var(--radio);padding:28px;text-align:center;box-shadow:var(--sombra);transition:var(--transicion);border-top:4px solid var(--azul);position:relative}
.card:hover{transform:translateY(-8px);box-shadow:var(--sombra-hover)}
.card-icon{font-size:52px;margin-bottom:15px}
.card h3{color:var(--azul-oscuro);margin:15px 0 12px;font-size:18px;font-weight:600}
.card p{font-size:14px;color:#666;margin-bottom:20px;min-height:65px}
.card a{display:inline-block;padding:12px 28px;background:var(--azul);color:var(--blanco);text-decoration:none;border-radius:6px;font-size:14px;font-weight:600;transition:var(--transicion)}
.card a:hover{background:var(--azul-oscuro);transform:scale(1.05)}
.card a.disabled{background:#adb5bd;pointer-events:none;cursor:not-allowed}
.card a.mantenimiento{background:var(--naranja);pointer-events:none}

/* BADGES */
.badge{position:absolute;top:15px;right:15px;padding:5px 12px;border-radius:15px;font-size:11px;font-weight:bold}
.badge.disponible{background:var(--verde);color:white}
.badge.proximamente{background:var(--amarillo);color:#333}
.badge.mantenimiento{background:var(--naranja);color:white}
.badge.interno{background:#6c757d;color:white}
.badge.nuevo{background:var(--rojo);color:white;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* OBRAS */
.obras-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:35px}
.obra-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 3px 15px rgba(0,0,0,0.07);border-left:4px solid #1e4d7b;transition:all 0.3s ease}
.obra-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.12)}
.obra-estado{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:10px}
.obra-estado.en_ejecucion{background:#e3f2fd;color:#1565c0}
.obra-estado.terminada{background:#e8f5e9;color:#2e7d32}
.obra-estado.paralizada{background:#fff3e0;color:#e65100}
.obra-estado.por_iniciar{background:#f3e5f5;color:#6a1b9a}
.obra-nombre{font-family:var(--font-titulo);font-size:16px;font-weight:600;color:#0d2847;margin-bottom:8px}
.obra-info{font-size:13px;color:#666;margin-bottom:14px}
.obra-progreso-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:#888;margin-bottom:6px}
.obra-progreso-bar{background:#e9ecef;border-radius:6px;height:8px;overflow:hidden}
.obra-progreso-fill{height:100%;background:linear-gradient(90deg,#1e4d7b,#2d6ba8);border-radius:6px;transition:width 1s ease}

/* CARDS EXTERNAS */
.card-externo{background:#fff;border-radius:12px;padding:24px;box-shadow:0 3px 15px rgba(0,0,0,0.07);transition:all 0.3s ease;cursor:pointer;border:2px solid transparent;text-align:center}
.card-externo:hover{border-color:#1e4d7b;transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,0.12)}
.ce-icono{font-size:44px;margin-bottom:14px}
.card-externo h3{font-family:var(--font-titulo);font-size:17px;font-weight:600;color:#0d2847;margin-bottom:10px}
.card-externo p{font-size:13px;color:#777;margin-bottom:16px}
.ce-btn{display:inline-block;padding:10px 22px;background:#f0f4f8;color:#1e4d7b;border-radius:8px;font-size:13px;font-weight:700;font-family:var(--font-titulo);transition:all 0.2s}
.card-externo:hover .ce-btn{background:#1e4d7b;color:#fff}

/* MAPA */
.map-container{background:var(--blanco);padding:25px;border-radius:var(--radio);box-shadow:var(--sombra);margin-bottom:35px}
.map-container h3{color:var(--azul-oscuro);margin-bottom:15px;font-size:20px}
.map-container iframe{width:100%;height:400px;border:none;border-radius:8px}

/* CONTACTO */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:35px}
.contact-card{background:var(--blanco);padding:25px;border-radius:var(--radio);box-shadow:var(--sombra);border-left:4px solid var(--azul)}
.contact-card h3{color:var(--azul-oscuro);margin:0 0 15px;font-size:18px;display:flex;align-items:center;gap:10px}
.contact-card ul{list-style:none}
.contact-card li{padding:10px 0;border-bottom:1px solid var(--gris);font-size:14px}
.contact-card li:last-child{border-bottom:none}
.contact-card a{color:var(--azul);text-decoration:none;transition:color 0.3s}
.contact-card a:hover{color:var(--azul-oscuro);text-decoration:underline}

/* FOOTER */
footer{background:linear-gradient(135deg,var(--azul-oscuro),var(--azul));color:var(--blanco);text-align:center;padding:30px 15px;font-size:13px;margin-top:60px}
footer strong{font-size:15px}
.footer-links{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.2)}
.footer-links a{color:var(--blanco);text-decoration:none;margin:0 12px;opacity:0.9;transition:opacity 0.3s}
.footer-links a:hover{opacity:1;text-decoration:underline}

/* WHATSAPP */
.whatsapp-float{position:fixed;width:60px;height:60px;bottom:100px;right:30px;background-color:#25d366;color:#fff;border-radius:50%;text-align:center;font-size:30px;box-shadow:2px 2px 15px rgba(0,0,0,0.3);z-index:1000;transition:var(--transicion);display:flex;align-items:center;justify-content:center;text-decoration:none}
.whatsapp-float:hover{background-color:#20ba5a;transform:scale(1.1)}
.whatsapp-float svg{width:32px;height:32px}
.whatsapp-tooltip{position:absolute;right:70px;background:white;color:#333;padding:10px 15px;border-radius:8px;box-shadow:0 3px 15px rgba(0,0,0,0.2);white-space:nowrap;font-size:14px;font-weight:500;opacity:0;transition:opacity 0.3s;pointer-events:none}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1}

/* CHATBOT TYPING */
.typing-indicator .message-bubble{display:flex;gap:5px;padding:14px 18px;align-items:center}
.typing-indicator .dot{width:8px;height:8px;background:#aaa;border-radius:50%;animation:typing-dot 1.2s infinite ease-in-out}
.typing-indicator .dot:nth-child(2){animation-delay:0.2s}
.typing-indicator .dot:nth-child(3){animation-delay:0.4s}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}}
.message-time{font-size:11px;color:#aaa;margin-top:4px;display:block}
.chatbot-message.user .message-time{text-align:right}
.chatbot-message.bot  .message-time{text-align:left}

.obra-filtro-btn {
    padding: 8px 16px;
    background: #f0f4f8;
    border: 1px solid #dde4ec;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: #1e4d7b;
    cursor: pointer;
    transition: all 0.2s;
}
.obra-filtro-btn:hover {
    background: #e0e8f0;
}
.obra-filtro-btn.activo {
    background: #1e4d7b;
    color: #fff;
    border-color: #1e4d7b;
}

/* ANIMACIONES */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* RESPONSIVE SLIDER */
@media(max-width:768px){
    .slider-wrap{height:55vh}
    .slide-content h2{font-size:26px}
    .slide-content p{font-size:14px;margin-bottom:20px}
    .slide-btn{padding:11px 24px;font-size:14px}
    .slide-arrow{width:38px;height:38px;font-size:22px}
    .slide-prev{left:10px}
    .slide-next{right:10px}
}
@media(max-width:480px){
    .slider-wrap{height:45vh}
    .slide-content h2{font-size:20px}
    .slide-content p{display:none}
    .slide-arrow{display:none}
}

.notice-flotante {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    max-width: 700px;
    width: 90%;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}