/* RESET GENERAL */
body {
    font-family:'Segoe UI',sans-serif;
margin:0;
background:#eef2f5;
}
.login-box {
    width: 360px;
    padding: 25px;
    background: #ffffff;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.login-img {
     width: 350px;
    height: 376px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* HEADER */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000000;
    color: white;
    padding: 10px 20px;
}

.titulo {
    font-weight: bold;
    font-size: 18px;
}

.info-user {
    font-size: 14px;
}

/* MENU */
.menu {
    display: flex;
    background: #FB1320;
}

.menu > a,
.menu > .dropdown {
    flex: 1;              /* 🔥 todos iguales */
    text-align: center;
	    border-right: 1px solid rgba(255,255,255,0.1);
}
.dropdown > a {
    width: 100%;
    display: block;
}
.menu a {
    flex: 1;
    padding: 12px;
    text-align: center;
    color: white;
    text-decoration: none;
    border-right: 1px solid rgba(255,255,255,0.2);
    transition: 0.3s;

}
.menu a {
    display: block;
    padding: 12px 10px;
    color: white;
    text-decoration: none;
}

.menu a:hover {
	background:#415a77;
}

/* DASHBOARD */
.dashboard{
max-width:1500px;
margin:0 auto;
padding:35px;
display:block;
}

/* COLUMNAS */
.left {
    width: 50%;
}

.right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* TARJETAS */
.card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* MAPA */
.mapa {
    text-align: center;
}

.mapa img {
    width: 100%;
    max-width: 400px;
}

/* GRAFICOS */
.grafico {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 2px dashed #ddd;
    border-radius: 8px;
}

/* LOGIN PAGE */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Caja login */
.login-box {
    width: 360px;
    padding: 25px;
    background: #ffffff;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Imagen */
.login-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: 10px;
}

/* Inputs */
.login-box input {
    width: 90%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
}

/* Botón */
.login-box button {
    width: 95%;
    padding: 12px;
    margin-top: 10px;
    background: #0B4E9D;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
#resultados_local {
    background: white;
    border: 1px solid #ccc;
    max-height: 150px;
    overflow-y: auto;
    position: absolute;
    width: 300px;
}

.item-local {
    padding: 8px;
    cursor: pointer;
}

.item-local:hover {
    background: #f1f1f1;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabla th, .tabla td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.tabla th {
    background: #34495e;
    color: white;
}

form input, form select {
    padding: 8px;
    margin: 5px 0;
    width: 300px;
}

form button {
    margin-top: 10px;
}

/* HEADER LISTADO */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.top-bar h2 {
    margin: 0;
}

/* BUSCADOR */
.buscador input {
    padding: 8px;
    width: 250px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.buscador button {
    padding: 8px 12px;
}

/* BOTON NUEVO */
.btn-nuevo {
    background: #27ae60;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

.btn-nuevo:hover {
    background: #1e8449;
}

/* TABLA MODERNA */
.tabla {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
}

.tabla th {
    background: #34495e;
    color: white;
    padding: 12px;
    text-align: left;
}

.tabla td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.tabla tr:hover {
    background: #f9f9f9;
}
.dataTables_wrapper {
    margin-top: 20px;
}

table.dataTable thead {
    background: #34495e;
    color: white;
}

.ficha-personero{
max-width:850px;
margin:30px auto;
background:#fff;
border-radius:18px;
padding:35px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.ficha-header{
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:3px solid #e6eef5;
padding-bottom:20px;
margin-bottom:30px;
}

.ficha-header h1{
margin:0;
color:#22384d;
}

.badge{
background:#e67e22;
color:white;
padding:8px 14px;
border-radius:20px;
font-weight:bold;
display:inline-block;
margin-top:10px;
}

.avatar{
font-size:70px;
}

.bloque{
margin-bottom:35px;
}

.bloque h3{
color:#2c3e50;
margin-bottom:20px;
border-left:5px solid #e67e22;
padding-left:10px;
}

.fila{
display:flex;
padding:12px 0;
border-bottom:1px solid #eee;
}

.fila label{
width:180px;
font-weight:bold;
color:#34495e;
}

.fila span{
flex:1;
}

.acciones{
margin-top:30px;
display:flex;
gap:15px;
}

.btn{
padding:12px 22px;
border-radius:10px;
text-decoration:none;
font-weight:bold;
}

.editar{
background:#3498db;
color:white;
}

.imprimir{
background:#2ecc71;
color:white;
}

/* KPIs */
.panel-kpi{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:14px;

margin-bottom:0px;

}

.kpi-card{
background: #fff;
border-radius: 12px;
padding:20px;
min-height:120px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.2s;
}

.kpi-card:hover{
transform: translateY(-2px);
}

.kpi-card h3{
font-size: 14px;
margin-bottom: 5px;
color:#555;
}

.kpi-numero{
font-size: 28px;
font-weight: bold;
}

/* COLORES */
.kpi-card.ok{
border-top: 4px solid #16a34a;
}

.kpi-card.alerta{
border-top: 4px solid #ea580c;
}

.kpi-card.azul{
border-top: 4px solid #2563eb;
}

.kpi-card.especial{
border-top: 4px solid #dc2626;

}

.kpi-card.naranja{
border-top: 4px  solid #f4c430;
	cursor:pointer;

background:#fff8dc;

}

.kpi-card.naranja .kpi-numero{

color:#d48806;

}


.ok{
border-top:6px solid #27ae60;
}

.alerta{
border-top:6px solid #e67e22;
}

.azul{
border-top:6px solid #3498db;
}


/* GRID PRINCIPAL */
.dashboard-grid{
display:grid;
grid-template-columns:60% 40%;
gap:25px;
margin:15px 25px 25px;
}
/* cards */
.card{
background:#fff;
border-radius:20px;
padding:28px;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.panel-lateral{
display:flex;
flex-direction:column;
gap:25px;
}

.panel-lateral .card{
height:290px;
}
/* mapa */


.mapa img{
width:100%;
max-width:760px;
}

.barra-progreso{
height:14px;
background:#e5ebf0;
border-radius:10px;
overflow:hidden;
margin-top:18px;
}

.avance{
height:100%;
background:linear-gradient(90deg,#27ae60,#2ecc71);
}

/* chart fix */
canvas{
max-height:220px !important;
}


/* distrito */

.chart-card{
padding:30px;
min-height:360px;
}

.chart-card canvas{
height:220px !important;
}

.mini-kpi{
margin-top:15px;
display:flex;
justify-content:space-around;
font-weight:600;
}


.grafico-card{
height:390px;
padding:30px;
}

#graficoDistritos{
height:300px !important;
}
/* resumen */
.resumen-card{
height:220px !important;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

.big-number{
font-size:70px;
font-weight:bold;
margin-top:15px;
color:#2c3e50;
}

.dashboard{
max-width:1600px;
margin:auto;
}
.mapa{
min-height:620px;
padding:25px;
}
/* responsive */
@media(max-width:1200px){




}
.panel-lateral{
display:flex;
flex-direction:column;
gap:25px;
}

.resumen-card{
text-align:center;
}

.big-number{
font-size:56px;
font-weight:bold;
}

/* mapa */

.mapa-svg path{
stroke:#fff;
stroke-width:4;
cursor:pointer;
transition:.3s;
}

.mapa-svg path:hover{
opacity:.8;
transform:scale(1.02);
filter:brightness(1.08);
}

.mapa-wrap{
position:relative;
max-width:650px;
margin:auto;
}

.mapa-base{
width:100%;
display:block;
}

.mapa-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.mapa-overlay polygon{
fill:rgba(0,0,0,.08);
stroke:#fff;
stroke-width:3;
cursor:pointer;
transition:.3s;
}

.mapa-overlay polygon:hover{
fill:rgba(255,150,0,.35);
}


.mapa-panel{
position:relative;
width:100%;
height:760px; /* más alto */
overflow:hidden;
}

/* mapa más grande */
.mapa-base{
width:92%;
max-width:920px;
display:block;
margin:20px auto;
}
.mapa-card{
min-height:650px;
}

/* badges */
.prov{
position:absolute;
background:#fff;
padding:12px 18px;
border-radius:16px;
box-shadow:0 5px 18px rgba(0,0,0,.16);
font-weight:700;
text-decoration:none;
color:#24364d;
text-align:center;
min-width:80px;
z-index:20;
transition:.25s;
}

.prov:hover{
transform:scale(1.05);
}

.prov span{
display:block;
font-size:24px;
font-weight:bold;
line-height:1.1;
color:#27ae60;
margin-top:4px;
}

/* posiciones */



/* norte */
.talara{
top:130px;
left:70px;
}

.sullana{
top:170px;
left:240px;
}

.ayabaca{
top:195px;
right:190px;
}

/* centro */
.paita{
top:300px;
left:120px;
}

.piura{
top:355px;
left:260px;
}

.morropon{
top:360px;
right:200px;
}

/* este */
.huancabamba{
top:450px;
right:100px;
}

/* sur */
.sechura{
bottom:70px;
left:230px;
}


/* muestra */

.prov-badge{
text-decoration:none;
color:#183153;
transition:.3s;
cursor:pointer;
}

.prov-badge:hover{
transform:scale(1.08);
box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.prov{
text-decoration:none;
transition:.25s;
cursor:pointer;
}

.prov:hover{
transform:scale(1.08);
box-shadow:0 8px 20px rgba(0,0,0,.20);
z-index:20;
}

.rojo span{
color:#e74c3c;
}

.amarillo span{
color:#f39c12;
}

.verde span{
color:#27ae60;
}


/* PRINCIPAL */



.form-card{
max-width:1400px;
margin:30px auto;
background:#fff;
padding:35px;
border-radius:24px;
box-shadow:0 8px 30px rgba(0,0,0,.08);
}

.form-card h2{
margin-bottom:25px;
color:#1e3a5f;
}

.seccion{
background:#dae1e9;
border-left:6px solid #34495E;
padding:30px;
margin-bottom:30px;
border-radius:18px;
}

.seccion h3{
margin:0 0 25px;
color:#1f3d63;
font-size:30px;
font-weight:700;
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:28px 50px;
}

.full{
grid-column:1 / span 2;
}

label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#23384f;
}

input,select,textarea{
width:100%;
padding:14px 16px;
border:1px solid #d7e1ea;
border-radius:12px;
font-size:16px;
background:#fff;
}

textarea{
height:120px;
}

.dni-box{
display:flex;
gap:10px;
}

.acciones-form{
margin-top:35px;
display:flex;
gap:15px;
}

.btn-guardar{
background:#28a745;
color:#fff;
border:none;
padding:15px 28px;
border-radius:12px;
font-weight:bold;
}

.btn-cancelar{
background:#6c757d;
color:#fff;
padding:15px 28px;
border-radius:12px;
text-decoration:none;
}

@media(max-width:768px){
.grid-2{
grid-template-columns:1fr;
}

.full{
grid-column:auto;
}
}



#btnReniec{
background:#2d8cff;
color:white;
border:none;
padding:14px 18px;
border-radius:12px;
font-weight:700;
cursor:pointer;
}


.wizard-wrap{
max-width:1100px;
margin:auto;
padding:30px;
}

.titulo-form h1{
margin-bottom:5px;
color:#14385d;
}

.titulo-form p{
color:#6b7785;
margin-bottom:30px;
}

.wizard-steps{
display:flex;
gap:10px;
margin-bottom:30px;
}

.step{
flex:1;
background:#eaf1f8;
padding:15px;
text-align:center;
border-radius:12px;
font-weight:700;
}

.step.active{
background:#0056b3;
color:white;
}

.wizard-page{
display:none;
}

.active-page{
display:block;
}

.card-onpe{
background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px 45px;
}

.full{
grid-column:1/span 2;
}

input,select,textarea{
width:100%;
padding:14px;
border:1px solid #d4dde6;
border-radius:10px;
}

.dni-box{
display:flex;
gap:10px;
}

#btnReniec{
background:#2d8cff;
color:white;
border:none;
padding:14px 18px;
border-radius:10px;
}

.wizard-buttons{
margin-top:30px;
display:flex;
justify-content:space-between;
}

.btn-next,.btn-save{
background:#0056b3;
color:#fff;
border:none;
padding:14px 28px;
border-radius:10px;
font-weight:bold;
}

.btn-save{
background:#28a745;
}

.btn-back{
background:#fff;
border:2px solid #cbd5e1;
padding:14px 28px;
border-radius:12px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.btn-back:hover{
background:#f1f5f9;
transform:translateY(-2px);
}

.wizard-page{
display:none;
}

.active-page{
display:block;
}

.page-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.tabla-moderna{
width:100%;
border-collapse:collapse;
}

.tabla-moderna th{
background:#334155;
color:#fff;
padding:12px;
text-align:left;
}

.tabla-moderna td{
padding:12px;
border-bottom:1px solid #e2e8f0;
}

.tabla-moderna tr:hover{
background:#f8fafc;
}

.badge{
padding:6px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

/* niveles */
.nivel-provincial{
background:#dbeafe;
color:#1d4ed8;
}

.nivel-distrital{
background:#dcfce7;
color:#15803d;
}

/* cargo */
.cargo-titular{
background:#fde68a;
color:#92400e;
}

.cargo-suplente{
background:#e9d5ff;
color:#6b21a8;
}

.text-muted{
color:#94a3b8;
}

.coord-grid{
display:grid;
grid-template-columns:repeat(2,minmax(320px,1fr));
gap:30px 60px;
max-width:1000px;
}

.form-card{
max-width:1200px;
margin:auto;
padding:50px 60px;
background:#fff;
border-radius:24px;
box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.form-card label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#1e3a5f;
}

.form-card select{
width:100%;
height:52px;
border:1px solid #cbd5e1;
border-radius:14px;
padding:0 15px;
font-size:16px;
}

.acciones-form{
margin-top:45px;
display:flex;
gap:18px;
}

.btn-guardar{
background:#16a34a;
color:white;
padding:14px 28px;
border:none;
border-radius:12px;
font-weight:600;
}

.btn-cancelar{
background:#64748b;
color:white;
padding:14px 28px;
border-radius:12px;
text-decoration:none;
}
/* LISTAR COORDINADORES */

.cards-resumen{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-bottom:25px;
}

.mini-card{
background:white;
padding:15px;
border-radius:18px;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.mini-card h4{
margin-bottom:5px;
color:#475569;
}

.numero{
font-size:42px;
font-weight:700;
color:#1e3a5f;
}

.bloque-titulo{
margin-bottom:10px;
color:#1e3a5f;
}

.mt40{
margin-top:40px;
}

.estado{
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:700;
}

.ok{
background:#dcfce7;
color:#166534;
}

.warn{
background:#fef3c7;
color:#92400e;
}

.danger{
background:#fee2e2;
color:#991b1b;
}

.accordion-prov{
background:#fff;
margin-top:20px;
border-radius:16px;
padding:18px;
box-shadow:0 3px 12px rgba(0,0,0,.05);
}

.accordion-prov summary{
display:flex;
justify-content:space-between;
cursor:pointer;
font-size:18px;
font-weight:700;
}

.page-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.subtitulo{
color:#64748b;
margin-top:6px;
}

.btn-nuevo{
background:#16a34a;
color:white;
padding:14px 22px;
border-radius:12px;
font-weight:700;
text-decoration:none;
box-shadow:0 4px 14px rgba(22,163,74,.25);
}

.btn-nuevo:hover{
transform:translateY(-2px);
}

.mini-btn{
background:#2563eb;
color:white;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-size:13px;
}

.credencial-btn{
background:#eef2ff;
color:#3730a3;
padding:8px 14px;
border-radius:10px;
text-decoration:none;
font-size:13px;
font-weight:600;
}

.badge-resumen{
background:#dbeafe;
color:#1d4ed8;
padding:8px 14px;
border-radius:20px;
font-weight:700;
}



.page-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.subtitulo{
color:#64748b;
margin-top:5px;
}

.btn-nuevo{
background:#16a34a;
color:#fff;
padding:14px 24px;
border-radius:12px;
font-weight:700;
text-decoration:none;
box-shadow:0 4px 14px rgba(22,163,74,.25);
}

.btn-nuevo:hover{
transform:translateY(-2px);
}

.credencial-btn{
background:#eef2ff;
color:#3730a3;
padding:8px 14px;
border-radius:10px;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.rol{
background:#dbeafe;
color:#1d4ed8;
}

.filtro-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

.filtros{
padding:30px;
margin-bottom:30px;
}


.nuevo{
background:#dbeafe;
color:#1d4ed8;
}

.asignar{
background:#dcfce7;
color:#15803d;
}

.ver{
background:#ede9fe;
color:#6d28d9;
}

.estado{
padding:7px 14px;
border-radius:20px;
font-weight:600;
}

.cubierta{
background:#dcfce7;
color:#166534;
}

.vacante{
background:#fee2e2;
color:#b91c1c;
}


.tabla-control{
width:100%;
border-collapse:separate;
border-spacing:0;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 4px 14px rgba(0,0,0,.05);
margin-top:25px;
}

.tabla-control thead th{
background:#24364d;
color:#fff;
padding:16px;
font-size:15px;
text-align:left;
position:sticky;
top:0;
}

.tabla-control td{
padding:14px 16px;
border-bottom:1px solid #e5e7eb;
vertical-align:middle;
}

.tabla-control tr:nth-child(even){
background:#f8fafc;
}

.tabla-control tr:hover{
background:#eef6ff;
}

/* columnas */
.col-mesa{
font-weight:700;
white-space:nowrap;
}

.col-elect{
text-align:center;
font-weight:600;
}

.col-acciones{
white-space:nowrap;
}

/* botones */
.btn-mini{
display:inline-block;
padding:8px 12px;
border-radius:8px;
text-decoration:none;
font-size:13px;
font-weight:600;
margin-right:8px;
}

.nuevo{
background:#dbeafe;
color:#1d4ed8;
}

.asignar{
background:#dcfce7;
color:#166534;
}

/* badges */
.estado{
padding:7px 14px;
border-radius:20px;
font-weight:600;
font-size:12px;
}

.vacante{
background:#fee2e2;
color:#b91c1c;
}

.cubierta{
background:#dcfce7;
color:#166534;
}

.tabla-wrap{
max-height:650px;
overflow:auto;
}

.dataTables_wrapper{
background:#fff;
padding:20px;
border-radius:18px;
box-shadow:0 4px 14px rgba(0,0,0,.05);
}

.dataTables_filter input,
.dataTables_length select{
padding:8px 12px;
border-radius:8px;
border:1px solid #cbd5e1;
}


.panel-onpe{
background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.barra{
height:20px;
background:#e2e8f0;
border-radius:30px;
overflow:hidden;
margin:15px 0;
}

.progreso{
height:100%;
background:#0f4c97;
}

.candidato{
background:#fff;
padding:25px;
margin-top:25px;
border-radius:18px;
}

.btn{
background:#2563eb;
color:white;
padding:14px 28px;
border-radius:10px;
text-decoration:none;
}

.nombre-partido{
display:flex;
align-items:center;
gap:18px;
font-size:28px;
font-weight:700;
}

.logo-partido{
width:54px;
height:54px;
object-fit:contain;
border-radius:8px;
background:#fff;
padding:4px;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* BOTONES */
.btn {
padding: 8px 14px;
border-radius: 8px;
border: 1px solid #e5e7eb;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}

/* NUEVO */
.btn-nuevo {
background: #e0e7ff;
color: #3730a3;
}

.btn-nuevo:hover {
background: #c7d2fe;
}

/* ASIGNAR */
.btn-asignar {
background: #dcfce7;
color: #166534;
}

.btn-asignar:hover {
background: #bbf7d0;
}

/* CREDENCIAL */
.btn-credencial {
background: #ede9fe;
color: #5b21b6;
}

.btn-credencial:hover {
background: #ddd6fe;
}

.acciones {
display: flex;
gap: 8px;
align-items: center;
}

.consulta-tools{
display:flex;
gap:10px;
margin:10px 0 15px 0;
flex-wrap:wrap;
}

.btn-consulta{
background:#f1f5f9;
border:none;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
font-size:13px;
transition:0.2s;
}

.btn-consulta:hover{
background:#e2e8f0;
}
.especial {
background:#fff7ed;

}

.badge-ok{
background:#dcfce7;
color:#166534;
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

.badge-danger{
background:#fee2e2;
color:#991b1b;
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

.kpi-card.especial{
background:#fff1f2;
padding:15px;
border-radius:10px;
cursor:pointer;
transition:0.2s;
}

.kpi-card.especial:hover{
transform:scale(1.03);
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.kpi-header{
font-weight:bold;
margin-bottom:5px;
}

.kpi-numero{
font-size:32px;
font-weight:bold;
color:#dc2626;
}

.kpi-detalle{
font-size:13px;
color:#555;
}
.kpi-card.ok .kpi-numero{ color:#16a34a; }
.kpi-card.alerta .kpi-numero{ color:#ea580c; }
.kpi-card.azul .kpi-numero{ color:#2563eb; }
.kpi-card.especial .kpi-numero{ color:#dc2626; }

.tabla-pro{
width:100%;
border-collapse:collapse;
margin-top:15px;
font-size:14px;
}

.tabla-pro thead{
background:#1e293b;
color:white;
}

.tabla-pro th{
padding:10px;
text-align:left;
}

.tabla-pro td{
padding:10px;
border-bottom:1px solid #e5e7eb;
}

.tabla-pro tbody tr:hover{
background:#f8fafc;
}


/* BADGES */
.badge-ok{
background:#dcfce7;
color:#166534;
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

.badge-danger{
background:#fee2e2;
color:#991b1b;
padding:4px 8px;
border-radius:6px;
font-size:12px;
}

.btn{
padding:6px 10px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:13px;
}

.btn-asignar{
background:#dcfce7;
color:#166534;
}

.btn-asignar:hover{
background:#bbf7d0;
}

.btn-eliminar{
background:#fee2e2;
color:#991b1b;
}

.btn-eliminar:hover{
background:#fecaca;
}

.alerta-mapa{
margin-top:4px;
background:#dc2626;
color:white;
font-size:11px;
padding:2px 6px;
border-radius:6px;
display:inline-block;
}

.alerta-mapa{
animation: parpadeo 1s infinite;
}

@keyframes parpadeo{
0%{opacity:1;}
50%{opacity:0.5;}
100%{opacity:1;}
}

.resumen-mapa{
margin-top:10px;
}

.alerta-especiales{
margin-top:5px;
color:#dc2626;
font-weight:500;
}

.icono-alerta{
margin-right:5px;
}

.detalle{
font-size:12px;
color:#555;
margin-left:5px;
}

.acciones-reporte{
margin-bottom:10px;
display:flex;
gap:10px;
}

.btn-excel{
background:#16a34a;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
}

.btn-pdf{
background:#dc2626;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
}


.alert{
margin-top:8px;
padding:10px;
border-radius:8px;
font-size:13px;
}

.ok{
background:#dcfce7;
color:#166534;
}

.error{
background:#fee2e2;
color:#991b1b;
}

.warning{
background:#fef3c7;
color:#92400e;
}


.btn-k{
background:#f59e0b;
color:white;
padding:8px 12px;
border-radius:8px;
text-decoration:none;
margin-left:5px;
}

.btn-k:hover{
background:#d97706;
}



.btn-c{
background:#2563eb;
color:white;
padding:8px 12px;
border-radius:8px;
text-decoration:none;
margin-left:5px;
}

.btn-c:hover{
background:#2A51A8;
}

.menu {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown > a {
    padding: 10px;
    text-decoration: none;
    color: white;
}

/* Submenu oculto */
.submenu {
    display: none;
    position: absolute;
    top: 100%; /* 🔥 clave */
    left: 0;
    background: #1e293b;
    border-radius: 6px;
    min-width: 220px;
    z-index: 1000;
    padding-top: 5px;
}

/* Items submenu */
.submenu a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}

/* Hover */
.submenu a:hover {
    background: #334155;
}

/* Mostrar submenu */
.dropdown:hover .submenu {
    display: block;
}
.dropdown {
    position: relative;
    padding-bottom: 5px; /* 🔥 evita corte */
}

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
}

.submenu {
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.dropdown:hover .submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ===== BOTÓN HAMBURGUESA ===== */
.menu-toggle {
    display: none;
    font-size: 24px;
    padding: 12px;
    cursor: pointer;
    color: white;
    background: #334155;
}

/* ===== MENU BASE ===== */
.menu {
    display: flex;
    width: 100%;
}

/* Items iguales (lo que ya tenías) */
.menu > a,
.menu > .dropdown {
    flex: 1;
    text-align: center;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    .menu {
        display: none;            /* oculto por defecto */
        flex-direction: column;   /* vertical */
        background: #1e293b;
    }

    .menu.active {
        display: flex;            /* mostrar al abrir */
    }

    .menu > a,
    .menu > .dropdown {
        flex: none;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* Submenus en móvil */
    .submenu {
        position: static;
        display: none;
        background: #0f172a;
    }

    .submenu.show {
        display: block;
    }
}

.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin-bottom:20px;
}

.stat-card{
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
text-align:center;
}

.stat-num{
font-size:30px;
font-weight:bold;
color:#0b57d0;
}

.stat-label{
margin-top:5px;
font-size:14px;
color:#666;
}

.stat-card.danger .stat-num{
color:#d93025;
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:20px;
}

.page-btn{
background:#0b57d0;
color:#fff;
padding:8px 14px;
border-radius:8px;
text-decoration:none;
font-size:14px;
}

.page-btn:hover{
opacity:.9;
}

.page-info{
font-size:14px;
color:#666;
}


.acciones-reporte{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
flex-wrap:wrap;
margin-bottom:20px;
}

.input-onpe{
padding:10px 14px;
border:1px solid #ddd;
border-radius:10px;
min-width:250px;
}

.btn-excel{
background:#1d6f42;
color:#fff;
padding:10px 14px;
border-radius:10px;
text-decoration:none;
}

.btn-pdf{
background:#d93025;
color:#fff;
padding:10px 14px;
border-radius:10px;
text-decoration:none;
}

.grid-4{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.input-onpe{
width:100%;
padding:10px;
border:1px solid #cbd5e1;
border-radius:8px;
}

.btn-filtrar{
background:#2563eb;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}
.acciones-reporte{
display:flex;
justify-content:flex-end;
gap:10px;
margin-bottom:15px;
flex-wrap:wrap;
}

.btn-limpiar{
background:#e2e8f0;
padding:10px 18px;
border-radius:8px;
text-decoration:none;
color:#111;
}

.acciones-right{
display:flex;
justify-content:flex-end;
gap:12px;
margin-bottom:20px;
flex-wrap:wrap;
}

.mb20{
margin-bottom:20px;
}

.kpi-card.coordinadores{

border-top:5px solid #7c3aed;

background:#f3e8ff;
	
	overflow:hidden;

}

.mini-kpi{

margin-top:10px;

font-size:12px;

display:flex;

flex-direction:column;

gap:4px;

color:#374151;

}

.kpi-card.coordinadores{

border-top:4px solid #7c3aed;

background:#f3e8ff;

display:flex;

flex-direction:column;

justify-content:flex-start;

min-height:165px;

padding:18px;

overflow:hidden;

}


.mini-kpi-inline{

display:flex;

flex-direction:column;

gap:8px;

margin-top:12px;

width:100%;

}


.tag{

font-size:11px;

padding:6px 10px;

border-radius:10px;

font-weight:700;

display:block;

text-align:center;

box-sizing:border-box;

width:auto;

max-width:100%;

}


.tag.local{

background:#dbeafe;

color:#1d4ed8;

}


.tag.dist{

background:#dcfce7;

color:#15803d;

}


.tag.prov{

background:#fef3c7;

color:#b45309;

}

.coord-local{

border-top:4px solid #2563eb;

background:#eff6ff;

}


.coord-dist{

border-top:4px solid #16a34a;

background:#f0fdf4;

}


.coord-prov{

border-top:4px solid #d97706;

background:#fffbeb;

}


.kpi-detalle{

margin-top:10px;

font-size:14px;

font-weight:700;

color:#4b5563;

}

.acciones-form{
display:flex;
gap:12px;
margin-top:20px;
}

.acciones-form{
display:flex;
gap:12px;
margin-top:20px;
}

.btn-guardar{
flex:1;
background:#16a34a;
color:white;
border:none;
padding:13px;
border-radius:10px;
font-size:15px;
cursor:pointer;
font-weight:600;
}

.btn-guardar:hover{
background:#15803d;
}

.btn-cancelar{
flex:1;
background:#e5e7eb;
color:#374151;
border:none;
padding:13px;
border-radius:10px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:.2s;
}

.btn-cancelar:hover{
background:#d1d5db;
}

.badge-user{
background:#2563eb;
color:white;
padding:4px 10px;
border-radius:20px;
font-size:12px;
margin-left:10px;
}

.grid-doble{
display:flex;
flex-direction:column;
gap:30px;
margin-top:20px;
}

.card-est{
background:#fff;
padding:25px;
border-radius:22px;
box-shadow:0 4px 18px rgba(0,0,0,.08);
border-top:6px solid #dc2626;
overflow:hidden;
}

.card-est.amarilla{
border-top:6px solid #eab308;
}


.tabla-est{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.tabla-est th{
background:#1e293b;
color:#fff;
padding:12px;
}

.tabla-est td{
padding:10px;
border-bottom:1px solid #ddd;
}

.fila-total{
background:#f1f5f9;
font-weight:bold;
}
.card-est.amarilla

.card-est.naranja{
border-top:6px solid #f97316;
}

.provincia-resumen{

margin-top:25px;
padding:20px;

background:#fff;

border-radius:20px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.provincia-resumen h3{

margin-bottom:20px;

font-size:20px;

font-weight:700;

}

.fila-provincia{

display:flex;

align-items:center;

gap:15px;

margin-bottom:14px;

}

.prov-nombre{

width:120px;

font-weight:700;

color:#1e293b;

}

.barra-container{

flex:1;

height:18px;

background:#e5e7eb;

border-radius:30px;

overflow:hidden;

}

.barra-cubierta{

height:100%;

background:linear-gradient(
90deg,
#22c55e,
#16a34a
);

border-radius:30px;

}

.prov-porcentaje{

width:60px;

text-align:right;

font-weight:bold;

color:#16a34a;

}

.provincia-resumen{

margin-top:25px;
padding:28px;

background:#ffffff;

border-radius:24px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}

.provincia-resumen h3{

font-size:28px;
font-weight:800;

margin-bottom:25px;

color:#0f172a;

text-align:center;

}

.fila-provincia-card{

margin-bottom:20px;

padding:14px 18px;

border-radius:18px;

background:#f8fafc;

transition:.3s;

}

.fila-provincia-card:hover{

transform:translateY(-2px);

box-shadow:
0 4px 12px rgba(0,0,0,.08);

}

.prov-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.prov-nombre{

font-size:22px;

font-weight:800;

color:#1e293b;

}

.prov-meta{

font-size:15px;

font-weight:700;

color:#64748b;

}

.barra-bg{

width:100%;

height:24px;

background:#e2e8f0;

border-radius:30px;

overflow:hidden;

}

.barra-fill{

height:100%;

border-radius:30px;

display:flex;

align-items:center;

justify-content:flex-end;

padding-right:12px;

font-weight:700;

color:#fff;

font-size:14px;

transition:width 1s ease;

}

/* COLORES */

.barra-fill.verde{

background:linear-gradient(
90deg,
#22c55e,
#16a34a
);

}

.barra-fill.amarillo{

background:linear-gradient(
90deg,
#facc15,
#eab308
);

color:#000;

}

.barra-fill.rojo{

background:linear-gradient(
90deg,
#ef4444,
#dc2626
);

}

.provincia-resumen{

margin-top:25px;
padding:28px;

background:#ffffff;

border-radius:24px;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

}

.provincia-resumen h3{

font-size:28px;
font-weight:800;

margin-bottom:25px;

color:#0f172a;

text-align:center;

}

.fila-provincia-card{

margin-bottom:20px;

padding:14px 18px;

border-radius:18px;

background:#f8fafc;

transition:.3s;

}

.fila-provincia-card:hover{

transform:translateY(-2px);

box-shadow:
0 4px 12px rgba(0,0,0,.08);

}

.prov-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.prov-nombre{

font-size:22px;

font-weight:800;

color:#1e293b;

}

.prov-meta{

font-size:15px;

font-weight:700;

color:#64748b;

}

.barra-bg{

width:100%;

height:24px;

background:#e2e8f0;

border-radius:30px;

overflow:hidden;

}

.barra-fill{

height:100%;

border-radius:30px;

display:flex;

align-items:center;

justify-content:flex-end;

padding-right:12px;

font-weight:700;

color:#fff;

font-size:14px;

transition:width 1s ease;

}

/* COLORES */

.barra-fill.verde{

background:linear-gradient(
90deg,
#22c55e,
#16a34a
);

}

.barra-fill.amarillo{

background:linear-gradient(
90deg,
#facc15,
#eab308
);

color:#000;

}

.barra-fill.rojo{

background:linear-gradient(
90deg,
#ef4444,
#dc2626
);

}
/* =========================
RESUMEN PROVINCIAS MINI
========================= */

.provincia-resumen-mini{
margin-top:20px;
padding:18px;
background:#fff;
border-radius:18px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.provincia-resumen-mini h3{
margin-bottom:18px;
font-size:22px;
font-weight:700;
color:#1e293b;
text-align:center;
}

.prov-row{
margin-bottom:14px;
}

.prov-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:6px;
}

.prov-name{
font-size:15px;
font-weight:700;
color:#1e3a5f;
}

.prov-data{
font-size:13px;
font-weight:600;
color:#64748b;
}

.progress-line{

width:90%;

height:20px;

background:#dfe4ea;

border-radius:30px;

overflow:visible;

position:relative;

}

.progress-ok{

height:100%;

background:linear-gradient(
90deg,
#FC1323,
#D50917
);

border-radius:30px;

position:relative;

transition:.5s;

display:flex;

align-items:center;

justify-content:flex-end;

padding-right:55px;

}

/* PORCENTAJE */

.porcentaje-barra{

font-size:13px;

font-weight:700;

color:white;

position:relative;

z-index:3;

}

/* ICONO */

.icono-barra{

position:absolute;

right:-12px;

top:50%;

transform:translateY(-50%);

width:22px;

height:22px;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;
font-weight:900;
color:#ea580c;
font-family:Arial,sans-serif;

font-weight:bold;

box-shadow:
0 4px 12px rgba(234,88,12,.25);

border:3px solid #ea580c;

z-index:5;
}

.footer-version{

position:fixed;

bottom:10px;
right:15px;

font-size:12px;

color:#64748b;

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

padding:6px 12px;

border-radius:20px;

backdrop-filter:blur(6px);

box-shadow:
0 2px 10px rgba(0,0,0,.08);

z-index:9999;

font-weight:500;

letter-spacing:.3px;
}


.pagination-wrapper{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:20px;
}

.btn-pag{
padding:8px 14px;
background:#1f4e79;
color:#fff;
text-decoration:none;
border-radius:6px;
}

.btn-pag:hover{
opacity:.9;
}

.page-info{
font-weight:bold;
}


.tabla-personeros{
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

.tabla-personeros thead tr{
    background:#344767;
    color:#fff;
}

.tabla-personeros th{
    padding:12px 10px;
    text-align:left;
    font-weight:600;
}

.tabla-personeros td{
    padding:10px;
    border-bottom:1px solid #e5e7eb;
}

.tabla-personeros tbody tr:hover{
    background:#f8fafc;
}

.tabla-personeros tbody tr:nth-child(even){
    background:#fafafa;
}

.tabla-personeros a{
    text-decoration:none;
    margin-right:8px;
    font-size:18px;
}

.pagination-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    margin-top:20px;
}

.btn-pag{
    padding:8px 14px;
    background:#2563eb;
    color:white;
    text-decoration:none;
    border-radius:6px;
}

.btn-pag:hover{
    background:#1d4ed8;
}

.page-info{
    font-weight:bold;
}