:root {
  --bg:#f5f9ff;
  --bg2:rgba(255,255,255,.88);
  --bg3:rgba(233,242,255,.92);
  --bg4:#dcecff;
  --bdr:rgba(15,55,110,.12);
  --bdr2:rgba(15,55,110,.22);
  --muted:#49627f;
  --dim:#60758f;
  --text:#10213d;
  --gold:#f4c030;
  --red:#ef4444;
  --grn:#10b981;
  --blue:#3b82f6;
  --c1:#f97316;
  --c2:#ec4899;
  --c3:#f4c030;
  --c4:#eab308;
  --c5:#10b981;
  --c6:#a855f7;
}

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

body{
  margin:0;
  color:var(--text);
  font-family:Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  overflow-x:hidden;
  background:
    linear-gradient(rgba(238,252,255,.58),rgba(255,255,255,.58)),
    url('../Images/fondo.jpg') center center/cover fixed no-repeat;
}

.card,.slide,.panel{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 12px 35px rgba(40,70,120,.12);
}

/* NAV */
.nav{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--bdr2);
  border-radius:40px;
  padding:7px 20px;
  z-index:300;
  backdrop-filter:blur(18px);
  box-shadow:0 12px 35px rgba(20,70,140,.14);
}

.nav button{
  background:none;
  border:none;
  color:var(--dim);
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  padding:4px 12px;
  border-radius:20px;
  transition:.15s;
}

.nav button:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
}

#counter{
  color:var(--muted);
  font-size:11px;
  min-width:48px;
  text-align:center;
}

.dots{display:flex;gap:5px}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(0,50,100,.18);
  cursor:pointer;
  transition:.15s;
}

.dot.on{background:var(--gold)}

/* SLIDE */
.slide{
  display:none;
  min-height:100vh;
  padding:26px 30px 110px;
  max-width:1280px;
  margin:0 auto;
  background:rgba(255,255,255,.28);
  border-radius:22px;
}

.slide.active{display:block}

.brand{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  color:#174b91;
  margin-bottom:2px;
}

.src{
  font-size:10px;
  color:#60758f;
  letter-spacing:.04em;
  margin-bottom:14px;
}

h1{
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(26px,3.4vw,44px);
  font-weight:900;
  line-height:1.1;
  color:#0d2344;
  margin-bottom:20px;
}

h1 span{color:#145bd7}

.sh{
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--muted);
  text-transform:uppercase;
  margin:20px 0 9px;
}

/* GRIDS */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* STAT BOX */
.sb{
  background:rgba(255,255,255,.86);
  border:1px solid var(--bdr);
  border-radius:12px;
  padding:13px 15px;
  box-shadow:0 10px 28px rgba(25,70,125,.08);
}

.sb .l{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:2px;
}

.sb .v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:32px;
  font-weight:900;
  line-height:1;
}

.sb .s{
  font-size:10px;
  color:var(--muted);
  margin-top:2px;
}

/* CARD */
.card{
  background:var(--bg2);
  border:1px solid var(--bdr);
  border-radius:14px;
  padding:16px;
  box-shadow:0 16px 45px rgba(25,70,125,.10);
}

/* MAP */
.map-box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:300px;
  padding:8px;
  background:rgba(255,255,255,.92);
}

.map-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(20,70,130,.12);
}

/* BAR */
.bw{
  background:rgba(15,55,110,.08);
  border-radius:3px;
  height:5px;
  margin:4px 0 2px;
}

.bf{
  height:5px;
  border-radius:3px;
  transition:width .4s;
}

/* PILL */
.pill{
  display:inline-block;
  padding:2px 9px;
  border-radius:20px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.05em;
  white-space:nowrap;
}

/* ZONA CARD */
.zcard{
  background:rgba(255,255,255,.90);
  border:1px solid var(--bdr);
  border-radius:16px;
  margin-bottom:12px;
  overflow:hidden;
  box-shadow:0 14px 38px rgba(25,70,125,.08);
}

.zcard-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 16px;
}

.zcard-title{
  font-family:'Barlow Condensed',sans-serif;
  font-size:20px;
  font-weight:700;
}

.zcard-body{padding:0 16px 14px}

/* STATS ROW */
.srow{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  margin:10px 0;
}

.ss{
  background:rgba(232,242,255,.88);
  border-radius:8px;
  padding:7px 9px;
}

.ss-l{
  font-size:9px;
  color:var(--muted);
  margin-bottom:2px;
}

.ss-v{
  font-family:'Barlow Condensed',sans-serif;
  font-size:19px;
  font-weight:700;
}

/* TABLAS */
.lt,.st{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}

.lt{margin-top:10px}

.lt thead th,.st th{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#174b91;
  background:rgba(20,91,215,.06);
  padding:6px 10px;
  border-bottom:1px solid var(--bdr);
  text-align:right;
  white-space:nowrap;
}

.lt thead th:first-child,.st th:first-child{text-align:left}

.lt td,.st td{
  padding:8px 10px;
  border-bottom:1px solid var(--bdr);
  text-align:right;
  vertical-align:top;
  color:#243a58;
}

.lt td:first-child,.st td:first-child{text-align:left}
.lt tr:last-child td{border-bottom:none}
.lt tr:hover td,.st tr:hover td{background:rgba(20,91,215,.05)}

.lt tfoot td,.st tfoot td{
  color:#0b3d86;
  background:rgba(20,91,215,.06);
  font-weight:700;
  border-top:1px solid var(--bdr2);
  border-bottom:none;
}

.st tfoot td{
  font-family:'Barlow Condensed';
  font-size:15px;
}

.ltag{
  display:inline-block;
  font-family:'Barlow Condensed';
  font-size:10px;
  font-weight:700;
  padding:0 5px;
  border-radius:3px;
  margin-right:4px;
}

.zdot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:5px;
  vertical-align:middle;
}

/* NOTE */
.note{
  font-size:11px;
  line-height:1.65;
  padding:9px 12px;
  border-radius:8px;
  margin-top:10px;
}

.ok,.note.ok{
  background:rgba(16,185,129,.08);
  color:#047857;
  border:1px solid rgba(16,185,129,.18);
}

.warn,.note.warn{
  background:rgba(234,179,8,.12);
  color:#8a5b00;
  border:1px solid rgba(234,179,8,.22);
}

.crit,.note.crit{
  background:rgba(239,68,68,.08);
  color:#b91c1c;
  border:1px solid rgba(239,68,68,.20);
}

.info,.note.info{
  background:rgba(20,91,215,.08);
  color:#1f5fb8;
  border:1px solid rgba(20,91,215,.18);
}

/* ALERT */
.alert{
  border:1px solid;
  border-radius:10px;
  padding:13px 15px;
  font-size:12px;
  line-height:1.7;
}

.alert strong{display:block;margin-bottom:4px}

/* TABLET */
@media(max-width:760px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
}

@media(max-width:700px){
  .srow{grid-template-columns:repeat(3,1fr)}
}

/* ===== MÓVILES: SCROLL VERTICAL, NO SLIDES ===== */
@media(max-width:768px){

  html,body{
    width:100%!important;
    min-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background-attachment:scroll!important;
  }

  body{font-size:13px!important}

  .slide,
  .slide.active{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:auto!important;
    margin:0 0 18px 0!important;
    padding:18px 12px 26px!important;
    border-radius:0!important;
    box-shadow:none!important;
    page-break-after:auto!important;
  }

  .nav,
  .slide-nav,
  .pagination,
  .dots,
  #counter{
    display:none!important;
  }

  .brand{
    font-size:9px!important;
    letter-spacing:.12em!important;
  }

  .src{
    font-size:9px!important;
    line-height:1.35!important;
  }

  h1{
    font-size:30px!important;
    margin-bottom:14px!important;
  }

  .g4{
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }

  .g3,
  .g2{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .sb{padding:10px!important}
  .sb .v{font-size:26px!important}
  .card{padding:12px!important}

  .map-box{
    min-height:auto!important;
    padding:8px!important;
  }

  .map-box img{
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  .zcard{
    border-radius:14px!important;
    margin-bottom:12px!important;
  }

  .zcard-hd{
    display:block!important;
    padding:12px!important;
  }

  .zcard-title{
    font-size:20px!important;
    line-height:1.1!important;
  }

  .zcard-body{
    padding:0 12px 12px!important;
  }

  .srow{
    grid-template-columns:repeat(2,1fr)!important;
  }

  .ss-v{font-size:18px!important}

  .lt,
  .st{
    font-size:10px!important;
    min-width:680px!important;
  }

  .lt td,
  .st td,
  .lt th,
  .st th{
    padding:7px 8px!important;
  }

  .zcard-body,
  .card{
    overflow-x:auto!important;
  }

  .alert{
    font-size:11px!important;
    line-height:1.55!important;
  }
}


/* =========================================================
   FIX MÓVIL SJL · Evita tablas cortadas en celular
   Convierte tablas en tarjetas apiladas y ajusta textos largos
========================================================= */
@media(max-width:768px){

  body{
    background-attachment:scroll!important;
  }

  .slide,
  .slide.active{
    overflow:hidden!important;
  }

  .card,
  .zcard,
  .zcard-body{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .zcard-title{
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  .zcard-hd > div{
    width:100%!important;
  }

  /* Tablas convertidas en tarjetas */
  .lt,
  .st{
    min-width:0!important;
    width:100%!important;
    display:block!important;
    border-collapse:separate!important;
  }

  .lt thead,
  .st thead{
    display:none!important;
  }

  .lt tbody,
  .lt tfoot,
  .lt tr,
  .lt td,
  .st tbody,
  .st tfoot,
  .st tr,
  .st td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }

  .lt tr,
  .st tr{
    background:rgba(255,255,255,.86)!important;
    border:1px solid var(--bdr)!important;
    border-radius:12px!important;
    margin:0 0 10px 0!important;
    padding:10px!important;
    box-shadow:0 8px 22px rgba(25,70,125,.08)!important;
  }

  .lt td,
  .st td{
    text-align:left!important;
    border-bottom:1px solid rgba(15,55,110,.10)!important;
    padding:7px 4px!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    font-size:12px!important;
  }

  .lt td:last-child,
  .st td:last-child{
    border-bottom:none!important;
  }

  .lt tfoot tr,
  .st tfoot tr{
    background:rgba(20,91,215,.07)!important;
    border-color:var(--bdr2)!important;
  }

  /* Etiquetas automáticas por tabla */
  
  /* Cuadro Resumen · 9 columnas */
.lt:not(.lt-comunas) td:nth-child(1)::before{content:"Zona: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(2)::before{content:"Com.: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(3)::before{content:"Nombre oficial comuna: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(4)::before{content:"Nº Manzanas: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(5)::before{content:"Nº Lotes: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(6)::before{content:"Pob. Ref.: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(7)::before{content:"Electores ONPE est.: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(8)::before{content:"% Padrón: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt:not(.lt-comunas) td:nth-child(9)::before{content:"Mesas est.: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}

/* Detalle Comunas · 4 columnas */
.lt-comunas td:nth-child(1)::before{content:"Comuna: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt-comunas td:nth-child(2)::before{content:"Manzanas: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt-comunas td:nth-child(3)::before{content:"Lotes: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
.lt-comunas td:nth-child(4)::before{content:"Electores est.: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  
  
  .st td:nth-child(1)::before{content:"Zona: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(2)::before{content:"Territorio / Comuna: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(3)::before{content:"Comunas / Barrio: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(4)::before{content:"Electores ONPE: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(5)::before{content:"% PADRON: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(6)::before{content:"MESAS EST: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(7)::before{content:"Acceso: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}
  .st td:nth-child(8)::before{content:"Prioridad: ";font-weight:800;color:#174b91;display:block;margin-bottom:2px;}

  .map-box img{
    max-width:100%!important;
    height:auto!important;
  }

  .g4{
    grid-template-columns:repeat(2,1fr)!important;
  }

  .sb .v{
    font-size:24px!important;
  }

  .note,
  .alert{
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:420px){
  h1{
    font-size:27px!important;
  }

  .g4,
  .srow{
    grid-template-columns:1fr 1fr!important;
  }

  .sb{
    min-width:0!important;
  }

  .sb .v{
    font-size:22px!important;
  }
}


/* =========================================================
   FIX V2 MÓVIL · Etiquetas correctas en Objetivo Electoral
   Evita que "Líderes" y "Votos objetivo" se crucen en celular.
========================================================= */
@media(max-width:768px){

  /* Limpieza de etiquetas genéricas en tablas objetivo */
  .st-zonas-objetivo td::before,
  .st-comunas-objetivo td::before{
    content:""!important;
    display:none!important;
  }

 /* Tabla 1: distribución por ZONAS */
/* Tabla 1: distribución por ZONAS */
.st-zonas-objetivo td:nth-child(1)::before{content:"Zona:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(2)::before{content:"Territorio:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(3)::before{content:"Comunas:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(4)::before{content:"Electores est.:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(5)::before{content:"% Padrón:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(6)::before{content:"Mesas est.:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(7)::before{content:"Líderes:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(8)::before{content:"Votos meta:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}
.st-zonas-objetivo td:nth-child(9)::before{content:"Barrios clave:"!important;display:block!important;font-weight:800!important;color:#174b91!important;margin-bottom:2px!important;}

  /* Tabla 2: distribución por COMUNAS */
  .st-comunas-objetivo td:nth-child(1)::before{
    content:"Zona:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }
  .st-comunas-objetivo td:nth-child(2)::before{
    content:"Comuna:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }
  .st-comunas-objetivo td:nth-child(3)::before{
    content:"Barrio / asentamiento:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }
  .st-comunas-objetivo td:nth-child(4)::before{
    content:"Líderes:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }
  .st-comunas-objetivo td:nth-child(5)::before{
    content:"Votos objetivo:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }
  .st-comunas-objetivo td:nth-child(6)::before{
    content:"% meta total:"!important;
    display:block!important;
    font-weight:800!important;
    color:#174b91!important;
    margin-bottom:2px!important;
  }

  /* Mejor lectura visual */
  .st-zonas-objetivo td,
  .st-comunas-objetivo td{
    font-size:13px!important;
    line-height:1.45!important;
  }

  .st-zonas-objetivo td strong,
  .st-comunas-objetivo td strong{
    font-size:14px!important;
  }

  .st-zonas-objetivo tfoot td,
  .st-comunas-objetivo tfoot td{
    font-weight:800!important;
  }
}
@media(max-width:768px){
  img[src*="MPOLITIK-lateral-base"]{
    height:42px!important;
    max-width:82%!important;
    object-fit:contain!important;
  }
}

/* =========================================================
   FIX MÓVIL · Grid 8 zonas objetivo → 2 columnas limpias
========================================================= */
@media(max-width:768px){
  .grid-zonas-objetivo{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
  }

  .grid-zonas-objetivo .sb{
    padding:12px 10px!important;
  }

  .grid-zonas-objetivo .sb .l{
    font-size:11px!important;
    line-height:1.3!important;
    margin-bottom:4px!important;
  }

  .grid-zonas-objetivo .sb .v{
    font-size:26px!important;
    line-height:1!important;
  }

  .grid-zonas-objetivo .sb .s{
    font-size:11px!important;
    margin-top:4px!important;
  }
}