:root{
  --blue:#0033a0;
  --red:#ce1126;
  --yellow:#fcd116;
  --green:#1f8947;
  --white:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f4f6fb;
  --card:#ffffff;
  --soft:#ecedf3;
  --ring:rgba(0,0,0,.06);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
}

body{
  font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  scroll-behavior:smooth;
}

/* Botones */
.btn{
  border:0;
  border-radius:999px;
  padding:.55rem .95rem;
  font-weight:600;
  cursor:pointer;
  font-size:.9rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.btn-primary{background:var(--blue);color:#fff}
.btn-secondary{background:var(--yellow);color:#000}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-edit{background:var(--yellow);color:#000}

/* Admin bar */
.admin-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.45rem 1.1rem;
  background:#020617;
  color:#fff;
}
.brand-chip{display:flex;gap:.25rem}
.chip{width:13px;height:13px;border-radius:50%}
.chip-yellow{background:var(--yellow)}
.chip-blue{background:var(--blue)}
.chip-red{background:var(--red)}
.admin-actions{display:flex;gap:.6rem;align-items:center}
.admin-label{font-size:.85rem;opacity:.9}

/* Header */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.4rem;
  background:linear-gradient(115deg,#fff,#fff 55%,#fff6d3);
  border-bottom:4px solid rgba(0,0,0,.04);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.header-left{display:flex;gap:1.1rem;align-items:center}
.cnp-logo{width:160px;max-width:30vw;height:auto}
.headline{
  font-size:1.9rem;
  line-height:2.2rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#020617;
}
.subheadline{
  font-size:1.05rem;
  color:var(--muted);
  margin-top:.2rem;
}

/* Layout */
.layout{
  display:flex;
  gap:1rem;
  padding:1rem 1rem 1.3rem;
  align-items:flex-start;
}

/* Sidebar */
.sidebar{
  position:sticky;
  top:1rem;
  width:270px;
  max-height:calc(100vh - 110px);
  overflow:auto;
  background:var(--card);
  border-radius:18px;
  padding:1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.sidebar-group + .sidebar-group{margin-top:1rem}
.sidebar-title{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:.5rem;
}
.tab-btn{
  width:100%;
  text-align:left;
  background:var(--soft);
  color:#111827;
  border-radius:11px;
  border:1px solid var(--ring);
  padding:.55rem .75rem;
  font-weight:600;
  cursor:pointer;
  font-size:.88rem;
  margin-bottom:.35rem;
  position:relative;
  overflow:hidden;
  transition:background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tab-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:transparent;
  transition:background .2s ease;
}
.tab-btn:hover{
  transform:translateX(2px);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.tab-btn.active{
  background:rgba(252,209,22,.98);
  color:var(--blue);
  border-color:rgba(0,0,0,.15);
}
.tab-btn.active::before{
  background:var(--blue);
}

/* Main content */
.content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.panel{
  display:none;
  background:var(--card);
  border-radius:20px;
  padding:1.05rem 1.15rem 1.2rem;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  animation:fadeSlide .25s ease-out;
  transform-origin:top left;
}
.panel.active{display:block}

@keyframes fadeSlide{
  from{opacity:0;transform:translateY(4px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Secciones */
.section-kicker{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
  margin-bottom:.2rem;
}
.section-kicker.sector-edu{color:#1f8947}
.section-kicker.sector-eco{color:#0033a0}
.section-kicker.sector-muj{color:#d81b60}
.section-kicker.sector-soc{color:#ce1126}
.section-kicker.sector-eco2{color:#1b5e20}
.section-kicker.sector-afro{color:#6d4c41}
.section-kicker.sector-com{color:#f57c00}
.section-kicker.sector-terr{color:#374151}

.section-title{
  font-size:1.55rem;
  color:#020617;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.section-title.xl{font-size:1.8rem}
.lead{font-size:1.02rem;color:#111827}

/* Bloques */
.block{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--ring);
  padding:.9rem 1rem;
}
.block + .block{margin-top:.8rem}
.block-title{
  font-size:1.08rem;
  margin-bottom:.35rem;
}
.block-title.highlight{
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Pastilla conteo indicadores */
.ind-count-pill{
  font-size:.8rem;
  font-weight:600;
  color:var(--muted);
  margin-left:.4rem;
}
.ind-count-pill .ind-count{
  font-weight:700;
  color:var(--blue);
}

/* Bloques especiales */
.block-intro{
  border-left:6px solid var(--yellow);
  background:linear-gradient(120deg,#fff,#fff,#fffbea);
}
.block-prologo{
  border-left:6px solid var(--blue);
}
.block-sintesis{
  border-left:6px solid var(--green);
  background:linear-gradient(120deg,#f8fafc,#fefce8);
}
.block-note{
  margin-top:.6rem;
  background:#f8fafc;
  border-radius:14px;
  border:1px dashed #cbd5e1;
  padding:.6rem .75rem;
}
.block-recs{
  border-left:6px solid var(--red);
  background:linear-gradient(120deg,#fff5f5,#fff);
}

/* Grid helpers */
.grid{display:grid;gap:1rem}
.grid-1{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr 1fr}
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr}
}

/* General layout con foto lateral */
.general-layout{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(260px,1fr);
  gap:1rem;
  align-items:flex-start;
}
.general-main{min-width:0}
.general-side{
  position:sticky;
  top:1rem;
}
.photo-card{
  box-shadow:0 16px 30px rgba(0,0,0,.1);
}
.photo-help{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.45rem;
}

/* Foto general */
.hero-img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:14px;
  background:#e5e7eb;
  border:1px dashed #cbd5e1;
}
.upload-actions{
  display:flex;
  gap:.5rem;
  justify-content:flex-end;
  margin-top:.6rem;
}

/* Barra de avance */
.progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.45rem;
}
.progress-label{font-weight:700;color:#020617}
.progress-value{font-weight:800;color:var(--green)}
.progress-bar{
  height:14px;
  background:var(--soft);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--ring);
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--green),var(--yellow));
  transition:width .3s;
}

/* Charts */
.chart-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.4rem;
}

/* Recuadro fijo para TODAS las gráficas */
canvas{
  width:100% !important;      /* ocupa todo el ancho del bloque */
  max-width:100%;
  height:260px !important;    /* alto fijo → no se estira infinito */
}

/* Sectores con muchos indicadores: un poquito más alto */
#eduChart,
#ecoChart{
  height:320px !important;
}


/* Recuadro fijo para TODAS las gráficas */
.chart-box {
  position: relative; /* Vital para que Chart.js calcule el tamaño */
  width: 100%;
  height: 300px; /* O la altura fija que desees para tus gráficas */
  overflow: hidden; /* Evita que se desborde */
}

/* Asegura que el canvas llene el contenedor */
.chart-box canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

canvas{
  width:100% !important;
  max-width:100%;
  max-height:320px; /* límite en vez de altura fija */
}

/* si quieres dar un poquito más de espacio a los sectores grandes: */
#eduChart,
#ecoChart{
  max-height:360px;
}

/* Texto de ayuda bajo gráfico */
.chart-help{
  margin:0;
  margin-top:.15rem;
  font-size:.85rem;
  color:var(--muted);
}

/* Panel head (sector) */
.panel-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:.7rem;
}
.meta{
  font-size:.94rem;
  color:var(--muted);
  margin-top:.2rem;
}

/* Consejeros */
.consejeros-box{
  min-width:260px;
  max-width:320px;
  background:#f3f6ff;
  border-radius:16px;
  border:1px solid #d9e3ff;
  padding:.75rem .8rem;
  font-size:.9rem;
  box-shadow:0 12px 20px rgba(15,23,42,.12);
}
.consej-title{
  font-weight:800;
  color:#020617;
  margin-bottom:.45rem;
}
.consejero-row{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  margin-bottom:.55rem;
}
.consejero-avatar-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
}
.consejero-foto{
  width:48px;
  height:48px;
  border-radius:999px;
  object-fit:cover;
  background:#e5e7eb;
  border:1px solid #cbd5e1;
}
.btn-photo{
  padding:.2rem .5rem;
  font-size:.72rem;
  line-height:1;
}
.consej-data .consej-name{
  font-weight:700;
  font-size:.95rem;
}
.consej-data .consej-org{
  font-size:.85rem;
  color:var(--muted);
}

/* Indicator cards */
.indicator-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:.9rem;
  margin-top:.9rem;
}
.ind-card{
  background:#fff;
  border-radius:16px;
  border:1px solid var(--ring);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:.85rem .9rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ind-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(0,0,0,.12);
}
.ind-title{
  font-weight:800;
  color:#020617;
  font-size:1rem;
}
.ind-meta{
  font-size:.9rem;
  color:#111827;
}
.ind-tabs{
  display:flex;
  gap:.4rem;
}
.ind-btn{
  flex:1;
  background:var(--soft);
  border-radius:11px;
  border:1px solid var(--ring);
  padding:.4rem .6rem;
  font-size:.9rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.ind-btn:hover{
  transform:translateY(-1px);
}
.ind-btn.active{
  background:var(--yellow);
  border-color:var(--yellow);
  color:#111827;
}
.ind-body{
  border-radius:12px;
  border:1px solid var(--ring);
  padding:.7rem .75rem;
  font-size:.9rem;
  line-height:1.3rem;
}
.ind-body.avance{
  background:#edf9f2;
  border-color:rgba(31,137,71,.25);
  color:#075e33;
}
.ind-body.alerta{
  background:#fef2f2;
  border-color:rgba(206,17,38,.25);
  color:#991b1b;
  display:none;
}

/* Comentarios y recomendaciones */
.comment-list{
  margin:.3rem 0 .2rem 1rem;
  padding:0;
}
.comment-list li{
  margin:.25rem 0;
  font-size:.95rem;
}
.rec-list{
  margin:.3rem 0 .2rem 1rem;
  padding:0;
}
.rec-list li{
  margin:.25rem 0;
  font-size:.95rem;
}

/* Footer */
.site-footer{
  padding:1rem 1.2rem 1.4rem;
  color:var(--muted);
  font-size:.9rem;
}

/* Edit mode visual */
.editable-on{
  outline:2px dashed var(--yellow);
  outline-offset:2px;
  background:#fffef3;
}

/* Panel edición numérica */
.edit-panel{
  display:none;
  gap:.6rem;
  flex-wrap:wrap;
  margin:.65rem 0 .4rem;
  font-size:.9rem;
}
.edit-panel label{display:flex;gap:.3rem;align-items:center}
.edit-panel input[type="number"]{width:95px}

/* Territoriales: dos cuadros de texto */
.terr-perspectivas .block{
  min-height:180px;
}

/* Responsive */
@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{
    position:static;
    width:100%;
    max-height:none;
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
  }
  .tab-btn{flex:1;min-width:140px}
  .general-layout{
    grid-template-columns:1fr;
  }
  .general-side{
    position:static;
  }
}
.chart-box {
  position: relative;
  height: 300px; /* O la altura que tú quieras que tengan las gráficas */
  width: 100%;
}
/* Fuerza una altura máxima para que las barras no crezcan infinito */
canvas {
  max-height: 350px !important;
  width: 100% !important;
}

/* Opcional: Ajuste específico para los pasteles para que no queden muy chicos */
.chart-container canvas[id*="Pie"], 
.chart-container canvas[id*="Doughnut"] {
  max-height: 400px !important;
}
/* ESTO SOLO APLICA EN CELULARES (Pantallas menores a 768px) */
@media (max-width: 768px) {
    
    /* 1. Ajustamos el contenedor principal del encabezado */
    header, .navbar, .encabezado { 
        /* Cambia '.encabezado' por el nombre real de tu clase si es otro */
        flex-direction: column; /* Pone los elementos uno debajo del otro */
        height: auto; /* Deja que crezca hacia abajo lo que necesite */
        padding: 20px; /* Un poco de aire interno */
        text-align: center; /* Centra todo */
    }

    /* 2. Ajustamos el logo para que no sea gigante */
    header img, .navbar img {
        max-width: 150px; /* Limita el tamaño del logo */
        margin-bottom: 10px; /* Separa el logo del texto */
    }

    /* 3. Ajustamos el tamaño del texto del título */
    header h1, .navbar h1 {
        font-size: 1.5rem; /* Reduce un poco el tamaño de la letra */
        line-height: 1.2; /* Mejora el espaciado entre renglones */
    }
}