/* 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: #2c3e50;
    color: white;
    padding: 10px 20px;
}

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

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

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

.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: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: #d35400;
    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(5,1fr);
gap:18px;
margin:22px 25px 15px 25px;
}

display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
margin:30px;
}

.kpi-card{
background:#fff;
padding:20px 22px;
height:110px;
border-radius:16px;
box-shadow:0 5px 16px rgba(0,0,0,.06);
}

.kpi-card h3{
font-size:15px;
margin-bottom:8px;
}

.kpi-numero{
font-size:38px;
margin-top:6px;
}

.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,#2ecc71,#27ae60);
}

/* 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:25px;
border-radius:18px;
box-shadow:0 4px 15px rgba(0,0,0,.05);
}

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

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

.bloque-titulo{
margin-bottom:20px;
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;
}

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

.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;
}