:root{
  /* PALETA MORADA (CLARO → OSCURO) */
  --p-50:   #EACFFC;
  --p-75:   #E2CEF6;
  --p-100:  #D59EFA;
  --p-200:  #D980F9;
  --p-300:  #C06EF7;
  --p-400:  #AB3DF5;
  --p-500:  #AF50E5;
  --p-600:  #960DF2;
  --p-700:  #8A0BD2;
  --p-800:  #780AC2;
  --p-900:  #5A0891;
  --p-950:  #5B0672;
  --p-1000: #3C0561;

  /* SEMÁNTICOS UI */
  --bg:          var(--p-50);
  --bg-2:        var(--p-75);
  --bg-3:        rgba(226,206,246,.55);
  --card:        #ffffff;
  --card-2:      var(--p-75);

  --text:        var(--p-1000);
  --text-2:      rgba(60,5,97,.82);
  --muted:       rgba(60,5,97,.62);
  --on-accent:   #ffffff;

  --line:        rgba(60,5,97,.18);
  --line-2:      rgba(60,5,97,.28);

  --accent:      var(--p-600);
  --accent-2:    var(--p-400);
  --accent-3:    var(--p-800);
  --accent-soft: var(--p-75);

  --shadow:      0 6px 14px rgba(150,13,242,.20);
  --shadow-2:    0 10px 24px rgba(120,10,194,.22);

  /* COMPAT CON TU CSS ORIGINAL (variables viejas) */
  --dorado-200:  var(--p-400);
  --dorado:      var(--p-600);
  --dorado-900:  var(--p-900);
  --rose:        var(--p-50);
  --rose-2:      var(--p-75);

  /* NEUTROS */
  --white:       #ffffff;
  --neutral-50:  #fafafa;
  --neutral-100: #f3f3f3;
  --neutral-200: #eeeeee;
  --neutral-300: #e5e5e5;
}

/* Base anti-desborde */
*{ box-sizing:border-box; }
img, iframe{ max-width:100%; }

/* =========================================================
   SECCIONES (DETAILS)
========================================================= */
details.section{
  margin:1rem 0;
  border:2px solid var(--dorado-200);
  padding:0;
  border-radius:12px;
  background:var(--bg-2);
  overflow:hidden;
}

details.section>summary{
  cursor:pointer;
  background:var(--dorado-200);
  color:var(--on-accent);
  padding:.95rem 1.1rem;
  display:flex;
  gap:.6rem;
  align-items:center;
  font-weight:800;
  border-radius:10px;
}

details.section[open]>summary{
  background:var(--dorado);
}

details.section>summary .count{
  background:var(--white);
  color:var(--dorado);
  border-radius:20px;
  padding:.2rem .55rem;
  font-size:.85rem;
  font-weight:900;
  border:1px solid var(--line);
}

details.section>summary .chev{
  margin-left:auto;
  transition:transform .2s ease;
}

details.section[open]>summary .chev{ transform:rotate(90deg); }

/* =========================================================
   SUBSECCIÓN (HIJOS)
========================================================= */
details.sub{
  margin:.7rem 1rem;
  border:0;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(150,13,242,.92), rgba(120,10,194,.92));
  overflow:hidden;
}

details.sub>summary{
  cursor:pointer;
  padding:.75rem .95rem;
  display:flex;
  gap:.5rem;
  align-items:center;
  font-weight:800;
  color:var(--on-accent);
}

details.sub[open]>summary{
  background:var(--rose-2);
  color:var(--text);
}

details.sub>summary .scount{
  background:var(--white);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:20px;
  padding:.1rem .5rem;
  font-size:.8rem;
  font-weight:900;
}

details.sub>summary .chev{
  margin-left:auto;
  transition:transform .2s ease;
}

details.sub[open]>summary .chev{ transform:rotate(90deg); }

/* =========================================================
   TABS (AÑOS)
========================================================= */
.jt-tabs{ margin-top:.75rem; }

.jt-tabs__nav{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  align-items:flex-end;
  padding:.25rem .25rem 0 .25rem;
}

.jt-tab{
  border:1px solid var(--neutral-300);
  background:var(--neutral-100);
  color:var(--muted);
  padding:.45em 1rem;
  border-radius:10px 10px 0 0;
  cursor:pointer;
  font-weight:900;
  font-size:1.1rem;
  transition:.15s;
}

.jt-tab:hover{ filter:brightness(.98); }

.jt-tab.is-active{
  background:var(--white);
  color:var(--text);
  border-color:var(--neutral-300);
  border-bottom:1px solid var(--white);
}

.jt-tabs__panes{
  border:1px solid var(--neutral-300);
  background:var(--white);
  border-radius:12px;
  padding:1rem;
  margin-top:-1px;
}

.jt-tab-pane{ display:none; }
.jt-tab-pane.is-active{ display:block; }

/* =========================================================
   GRID PERIODOS (BOTONES)
   PC: 4 | Tablet: 2 | Cel: 1
========================================================= */
.q-row{
  display:grid;
  gap:.75rem;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

.qbox{
  border:1px solid var(--dorado);
  border-radius:12px;
  background:var(--white);
  padding:.75rem .95rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  cursor:pointer;
  transition:.15s;
  color:var(--dorado);
  font-weight:900;

  width:100%;
  min-width:0;        /* clave anti-desborde */
  overflow:hidden;
}

.qbox i{ flex:0 0 auto; }

.qbox .label{
  min-width:0;
  flex:1 1 auto;
  color:var(--dorado);

  overflow:hidden;
  text-overflow:ellipsis;

  display:-webkit-box;
  -webkit-line-clamp:2;        /* máximo 2 líneas */
  -webkit-box-orient:vertical;

  word-break:break-word;
  line-height:1.15;
}

.qbox .badge{
  flex:0 0 auto;
  background:var(--bg-2);
  border:1px solid var(--line);
  color:var(--text);
  font-weight:900;
  border-radius:999px;
  padding:.12rem .5rem;
  font-size:.9rem;
}

.qbox .chev{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--dorado);
}

.qbox:hover{
  box-shadow:var(--shadow);
  border-color:var(--dorado-200);
}

.qbox:hover .label,
.qbox:hover .chev{
  color:var(--dorado-200);
}

.qbox.disabled{
  filter:grayscale(.9);
  opacity:.55;
  cursor:not-allowed;
}

.qbox.disabled .chev{ visibility:hidden; }

.qbox.open{
  background:var(--bg-2);
  border-color:var(--dorado-200);
  color:var(--dorado-200);
}

/* Abrir bloque abajo del grid */
.q-row > div[id^="jt-blk-"]{ grid-column:1 / -1; }

/* Toggle por clase */
.jt-block{ display:none !important; }
.jt-block.is-open{ display:block !important; }

/* =========================================================
   LISTA DOCUMENTOS
========================================================= */
ul.doc-list{
  list-style:none;
  padding:0;
  margin:0 0 1rem 0;
}

ul.doc-list li{ margin:.25rem 0; }

a.doc-link{
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:flex-end;
  gap:.5rem;
  color:var(--text);
  text-decoration:none;

  width:100%;
  max-width:100%;
  min-width:0;
  line-height:1.2;

  word-break:break-word;
  overflow-wrap:anywhere;
}

a.doc-link::before{
  content:"";
  width:20px;
  height:20px;
  flex-shrink:0;
  margin-top:2px;
  background-image:url("https://chiautlaedomex.gob.mx/wp-content/uploads/2026/doc-icon.svg");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
}

a.doc-link:hover{
  color:var(--dorado-900);
  text-decoration:underline;
}

.doc-link.is-disabled{
  cursor:default;
  color:var(--muted);
  text-decoration:none;
  pointer-events:none;
}

/* =========================================================
   SPLIT LISTA (55%) – VISOR (45%)
========================================================= */
.jt-docsplit{
  display:flex !important;
  gap:1rem;
  padding:0 1rem !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.jt-docsplit__list{
  flex:0 0 55% !important;
  max-width:55% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.jt-docsplit__viewer{
  flex:0 0 45% !important;
  max-width:45% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

/* =========================================================
   VIEWER
========================================================= */
.jt-viewer__header{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom:.6rem;
}

.jt-viewer__title{
  font-weight:900;
  color:var(--text);
  word-break:break-word;
}

.jt-viewer__buttons{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}

.jt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.35rem .6rem;
  border-radius:12px;
  border:1px solid var(--dorado-200);
  background:var(--white);
  color:var(--text);
  font-weight:900;
  line-height:1;
  text-decoration:none;
  transition:.15s;

  max-width:100%;
  white-space:nowrap;
}

.jt-btn:hover{
  box-shadow:var(--shadow);
  color:var(--dorado-200);
}

.jt-viewer__frame{
  width:100% !important;
  max-width:100% !important;
  height:480px;
  border:1px solid var(--neutral-200);
  border-radius:12px;
  background:var(--neutral-50);
  display:block;
}

/* =========================================================
   QUICK EDIT (ADMIN)
========================================================= */
.inline-edit-row .jt-quick-url{
  width:100%;
  min-height:60px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.6rem .75rem;
  color:var(--text);
  background:var(--white);
  outline:none;
}

.inline-edit-row .jt-quick-url:focus{
  border-color:var(--dorado-200);
  box-shadow:0 0 0 4px rgba(171,61,245,.18);
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Tablet */
@media (max-width: 1540px){
  .q-row{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  .jt-docsplit{
    flex-direction:column !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .jt-docsplit__list,
  .jt-docsplit__viewer{
    max-width:100% !important;
    flex:1 1 auto !important;
  }

}



/* Tablet */
@media (max-width: 992px){
  .q-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .jt-docsplit{
    flex-direction:column !important;
    overflow:visible !important;
    padding:0 !important;
  }

  .jt-docsplit__list,
  .jt-docsplit__viewer{
    max-width:100% !important;
    flex:1 1 auto !important;
  }

  .jt-viewer__frame{ height:380px; }
}

/* Celular */
@media (max-width: 576px){
  .q-row{ grid-template-columns:repeat(1, minmax(0, 1fr)); }

  /* tabs scroll horizontal */
  .jt-tabs__nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:.3rem;
    padding-bottom:.25rem;
  }

  /* tabs verticales (como lo tenías) */
  .jt-tab{
    padding:.6rem .75rem;
    font-size:1.05rem;
    min-width:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
    line-height:1;
  }

  .qbox{ padding:.8rem .9rem; }
  .qbox .label{ font-size:.95rem; }

  /* viewer botones */
  .jt-btn-full{ display:none !important; }
  .jt-btn{ padding:1rem .75rem; white-space:normal; }
}