/* =====================================================
   ARCHIVO GENERAL SAN JUAN — decreto.css
   Visor de decretos (decreto_*.html).
   Requiere shared.css cargado antes.
   Todo scoped bajo .decreto-doc.
   ===================================================== */

.decreto-doc {
  font-family: var(--fb);
  font-size: 15px;
  line-height: 1.7;
}

/* ─── Banda de metadatos ─────────────────────────────────────────────────── */
.decreto-doc .header-decreto {
  background: oklch(from var(--cp) l c h / 0.06);
  border: 1px solid oklch(from var(--cp) l c h / 0.2);
  border-radius: 12px;
  padding: 8px 24px;
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.decreto-doc .decreto-badge {
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-act);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.decreto-doc .decreto-fecha {
  font-family: var(--fu);
  font-size: 11px;
  color: var(--ct3);
}

.decreto-doc .decreto-ley {
  margin-left: auto;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 500;
  color: var(--cp-dk);
  letter-spacing: 0.03em;
}

/* ─── Layout sidebar + contenido ────────────────────────────────────────── */
.decreto-doc .page-layout {
  display: flex;
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.decreto-doc .sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--csurf);
  border-right: 1px solid var(--cbrd);
  position: sticky;
  top: var(--header-h, 57px);
  height: calc(100vh - var(--header-h, 57px));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cp-lt) var(--cmuted);
}

.decreto-doc .sidebar::-webkit-scrollbar       { width: 4px; }
.decreto-doc .sidebar::-webkit-scrollbar-track { background: var(--cmuted); }
.decreto-doc .sidebar::-webkit-scrollbar-thumb { background: var(--cp-lt); border-radius: 2px; }

.decreto-doc .sidebar-inner { padding: 24px 16px; }

.decreto-doc .sidebar-title {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cp-act);
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid oklch(from var(--cp) l c h / 0.2);
}

.decreto-doc .nav-section        { margin-bottom: 20px; }

.decreto-doc .nav-section-label {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ct3);
  margin-bottom: 6px;
  padding-left: 8px;
}

.decreto-doc .nav-item {
  display: block;
  padding: 6px 10px;
  color: var(--ct2);
  text-decoration: none;
  font-size: 13px;
  font-family: var(--fu);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  line-height: 1.4;
}

.decreto-doc .nav-item:hover {
  background: oklch(from var(--cp) l c h / 0.06);
  color: var(--cp-dk);
  transform: translateX(4px);
}

.decreto-doc .nav-item.active {
  background: oklch(from var(--cp) l c h / 0.1);
  color: var(--cp-act);
  font-weight: 600;
}

.decreto-doc .nav-item--sub {
  padding-left: 22px;
  font-size: 12px;
}

.decreto-doc .nav-item .item-num {
  font-family: var(--fu);
  font-size: 10px;
  color: var(--cp-act);
  margin-right: 5px;
  font-weight: 700;
}

/* ─── Contenido principal ────────────────────────────────────────────────── */
.decreto-doc .main-content {
  flex: 1;
  padding: 32px 28px;
  min-width: 0;
  overflow-x: hidden;
}

/* ─── Secciones del documento ────────────────────────────────────────────── */
.decreto-doc .doc-section {
  background: var(--csurf);
  border: 1px solid var(--cbrd);
  border-radius: 12px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06);
}

.decreto-doc .section-header {
  background: oklch(from var(--cp) l c h / 0.06);
  border-bottom: 1px solid oklch(from var(--cp) l c h / 0.18);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.decreto-doc .section-header .section-num {
  font-family: var(--fu);
  font-size: 10px;
  background: var(--cp);
  color: var(--cton);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  font-weight: 700;
  text-transform: uppercase;
}

.decreto-doc .section-header h2 {
  font-family: var(--fu);
  font-size: 15px;
  font-weight: 700;
  color: var(--cp-act);
}

.decreto-doc .section-body { padding: 24px 28px; }

/* ─── Metadatos ──────────────────────────────────────────────────────────── */
.decreto-doc .decreto-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.decreto-doc .meta-card {
  background: var(--cmuted);
  border: 1px solid var(--cbrd);
  border-top: 3px solid var(--cp-lt);
  padding: 14px 16px;
  border-radius: 8px;
}

.decreto-doc .meta-card .meta-label {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-act);
  margin-bottom: 4px;
  font-weight: 700;
}

.decreto-doc .meta-card .meta-value {
  font-family: var(--fu);
  font-size: 15px;
  font-weight: 700;
  color: var(--ct);
}

.decreto-doc .meta-card .meta-sub {
  font-family: var(--fu);
  font-size: 11px;
  color: var(--ct3);
  margin-top: 2px;
}

/* ─── Texto del decreto ──────────────────────────────────────────────────── */
.decreto-doc .decreto-texto { line-height: 1.85; }

.decreto-doc .decreto-texto p {
  margin-bottom: 14px;
  font-size: 16px;
  font-family: var(--fb);
}

.decreto-doc .decreto-texto strong {
  color: var(--cp-act);
  font-weight: 600;
}

.decreto-doc .visto-block,
.decreto-doc .considerando-block { margin-bottom: 20px; }

.decreto-doc .block-title {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cp-act);
  border-bottom: 1px solid oklch(from var(--cp) l c h / 0.2);
  padding-bottom: 6px;
  margin-bottom: 12px;
  font-weight: 700;
}

/* ─── Artículos (sin side-stripe) ───────────────────────────────────────── */
.decreto-doc .articulos { margin-top: 24px; }

.decreto-doc .articulo {
  background: oklch(from var(--cp) l c h / 0.04);
  border: 1px solid oklch(from var(--cp) l c h / 0.14);
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 8px;
}

.decreto-doc .articulo .art-titulo {
  font-family: var(--fu);
  font-size: 10px;
  color: var(--cp-dk);
  letter-spacing: 0.07em;
  margin-bottom: 5px;
  font-weight: 700;
  text-transform: uppercase;
}

.decreto-doc .articulo p {
  font-size: 14px;
  color: var(--ct);
  font-family: var(--fb);
}

/* ─── Firmantes ──────────────────────────────────────────────────────────── */
.decreto-doc .firmantes {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--cbrd);
  flex-wrap: wrap;
}

.decreto-doc .firmante {
  text-align: center;
  flex: 1;
  min-width: 180px;
}

.decreto-doc .firmante .firma-linea {
  width: 160px;
  height: 1px;
  background: var(--cp-lt);
  margin: 0 auto 8px;
}

.decreto-doc .firmante .firma-nombre {
  font-family: var(--fu);
  font-size: 13px;
  font-weight: 700;
  color: var(--ct);
}

.decreto-doc .firmante .firma-cargo {
  font-family: var(--fu);
  font-size: 10px;
  color: var(--ct3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* ─── Nota aclaratoria ───────────────────────────────────────────────────── */
.decreto-doc .nota-aclaratoria {
  background: oklch(from var(--cp) l c h / 0.04);
  border: 1px solid oklch(from var(--cp) l c h / 0.18);
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--ct3);
  font-family: var(--fb);
}

.decreto-doc .nota-aclaratoria strong {
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--cp-dk);
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  text-transform: uppercase;
}

.decreto-doc .nota-aclaratoria ul { padding-left: 18px; }
.decreto-doc .nota-aclaratoria li { margin-bottom: 3px; }

/* ─── Badge de resolución ────────────────────────────────────────────────── */
.decreto-doc .resolucion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: oklch(from var(--cp) l c h / 0.06);
  border: 1px solid oklch(from var(--cp) l c h / 0.22);
  padding: 6px 14px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.decreto-doc .resolucion-badge span {
  font-family: var(--fu);
  font-size: 11px;
  color: var(--cp-dk);
  letter-spacing: 0.05em;
  font-weight: 600;
}

.decreto-doc .resolucion-badge .resolucion-sep {
  color: oklch(from var(--cp) l c h / 0.35);
  font-weight: 400;
}

/* ─── Tabla ──────────────────────────────────────────────────────────────── */
.decreto-doc .tabla-wrapper {
  overflow-x: auto;
  margin-top: 4px;
  border: 1px solid var(--cbrd);
  border-radius: 8px;
  width: 100%;
}

.decreto-doc table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.decreto-doc col.col-num    { width: 38px; }
.decreto-doc col.col-nombre { width: 170px; }
.decreto-doc col.col-desc   { width: 220px; }
.decreto-doc col.col-norma  { width: 160px; }
.decreto-doc col.col-ag     { width: 72px; }
.decreto-doc col.col-ac     { width: 72px; }
.decreto-doc col.col-gp     { width: 90px; }
.decreto-doc col.col-elim   { width: 62px; }
.decreto-doc col.col-deg    { width: 90px; }
.decreto-doc col.col-dee    { width: 90px; }
.decreto-doc col.col-agp    { width: 100px; }

.decreto-doc thead .th-grupo {
  background: var(--cp);
  color: var(--cton);
  font-size: 11px;
  font-family: var(--fu);
  letter-spacing: 0.07em;
  text-align: center;
  padding: 6px;
  border-right: 1px solid oklch(100% 0 0 / 0.2);
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
}

.decreto-doc thead th {
  background: var(--cp-dk);
  color: oklch(97% 0.015 70);
  padding: 8px 6px;
  text-align: center;
  font-family: var(--fu);
  font-size: 11px;
  letter-spacing: 0.03em;
  font-weight: 500;
  border-right: 1px solid oklch(100% 0 0 / 0.12);
  line-height: 1.3;
  word-break: break-word;
  white-space: normal;
}

.decreto-doc thead th:last-child { border-right: none; }

.decreto-doc tbody tr           { border-bottom: 1px solid var(--cbrd); }
.decreto-doc tbody tr:hover     { background: oklch(from var(--cp) l c h / 0.05); }
.decreto-doc tbody tr:nth-child(even) { background: var(--cmuted); }

.decreto-doc tbody td {
  padding: 9px 7px;
  vertical-align: top;
  border-right: 1px solid var(--cbrd);
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}

.decreto-doc tbody td:last-child { border-right: none; }

.decreto-doc td.td-num {
  text-align: center;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  color: var(--cp-act);
}

.decreto-doc td.td-nombre {
  font-weight: 600;
  color: var(--ct);
  font-size: 12px;
  font-family: var(--fb);
}

.decreto-doc td.td-desc {
  color: var(--ct2);
  font-size: 12px;
  font-family: var(--fb);
}

.decreto-doc td.td-norma {
  font-size: 11px;
  color: var(--ct3);
  font-style: italic;
  font-family: var(--fb);
}

.decreto-doc td.td-tiempo {
  text-align: center;
  font-family: var(--fu);
  font-size: 11px;
}

.decreto-doc td.td-disp {
  text-align: center;
  vertical-align: middle;
  padding: 6px 4px;
}

/* ─── Badges de tabla ────────────────────────────────────────────────────── */
.decreto-doc .badge-si {
  display: inline-block;
  background: oklch(from var(--cok) l c h / 0.1);
  color: oklch(38% 0.12 145);
  border: 1px solid oklch(from var(--cok) l c h / 0.35);
  font-family: var(--fu);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.decreto-doc .badge-si-parcial {
  display: inline-block;
  background: oklch(from var(--cp) l c h / 0.1);
  color: var(--cp-act);
  border: 1px solid oklch(from var(--cp) l c h / 0.28);
  font-family: var(--fu);
  font-size: 10px;
  padding: 3px 5px;
  border-radius: 5px;
  font-weight: 600;
  line-height: 1.3;
}

.decreto-doc .badge-no {
  color: var(--cbrd2);
  font-family: var(--fu);
  font-size: 14px;
  line-height: 1;
}

.decreto-doc .badge-perm {
  display: inline-block;
  background: var(--cp-dk);
  color: var(--cton);
  font-family: var(--fu);
  font-size: 11px;
  padding: 3px 5px;
  border-radius: 5px;
  font-weight: 700;
  line-height: 1.3;
}

.decreto-doc .tiempo-años {
  font-weight: 700;
  color: var(--cp-dk);
}

/* ─── Scroll-margin para anclas ──────────────────────────────────────────── */
.decreto-doc :target { scroll-margin-top: 80px; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .decreto-doc .page-layout    { flex-direction: column; }

  .decreto-doc .sidebar {
    width: 100%;
    position: relative;
    top: 0;
    height: auto;
    max-height: 280px;
  }

  .decreto-doc .main-content   { padding: 20px 16px; }
  .decreto-doc .decreto-meta   { grid-template-columns: 1fr; }
  .decreto-doc .firmantes      { gap: 16px; }
  .decreto-doc .decreto-ley    { margin-left: 0; }
  .decreto-doc .header-decreto { margin: 0 16px; }
}
/* ── Movimiento reducido ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .decreto-doc .nav-item { transition: background 0.15s, color 0.15s; }
}