/*
 * perf.css — capa de diseño del sistema PERF sobre el tema (core.css).
 * Un solo acento: el verde institucional (#034602). Todo lo derivado (enlaces,
 * fondos suaves, anillos de enfoque, menú) sale de ese color; antes quedaban
 * restos del morado original del tema.
 * Se carga al final del <head> para ganarle al tema y a DataTables.
 */

/* ---------- Tokens ---------- */
:root:not([data-bs-theme=dark]) {
  --perf-verde: #034602;
  --perf-verde-rgb: 3, 70, 2;
  --perf-verde-700: #023a02;
  --perf-verde-50: #eef5ee;
  --perf-verde-100: #dcebdc;
  --perf-verde-200: #b8d4b8;
  --perf-tinta: #1f2a24;          /* texto principal, gris con tinte verde */
  --perf-tinta-2: #55625a;        /* texto secundario */
  --perf-borde: #e3e8e4;
  --perf-fondo: #f4f6f3;          /* fondo de la aplicación */
  --perf-radio: .75rem;
  --perf-radio-sm: .5rem;
  --perf-sombra: 0 1px 2px rgba(18, 38, 24, .06), 0 4px 14px rgba(18, 38, 24, .06);
  --perf-sombra-hover: 0 2px 4px rgba(18, 38, 24, .08), 0 10px 24px rgba(18, 38, 24, .09);
  --perf-anillo: 0 0 0 .2rem rgba(var(--perf-verde-rgb), .18);
  --perf-transicion: 180ms cubic-bezier(.2, .7, .2, 1);

  --bs-primary: var(--perf-verde);
  --bs-primary-rgb: var(--perf-verde-rgb);
  --bs-primary-bg-subtle: var(--perf-verde-50);
  --bs-primary-border-subtle: var(--perf-verde-200);
  --bs-primary-text-emphasis: var(--perf-verde-700);
  --bs-link-color: var(--perf-verde);
  --bs-link-color-rgb: var(--perf-verde-rgb);
  --bs-link-hover-color: var(--perf-verde-700);
  --bs-link-hover-color-rgb: 2, 58, 2;
  --bs-body-bg: var(--perf-fondo);
  --bs-body-color: var(--perf-tinta);
  --bs-heading-color: var(--perf-tinta);
  --bs-secondary-color: var(--perf-tinta-2);
  --bs-border-color: var(--perf-borde);
  --bs-box-shadow: var(--perf-sombra);
  --bs-border-radius: var(--perf-radio-sm);
  --bs-focus-ring-color: rgba(var(--perf-verde-rgb), .25);

  --bs-menu-active-bg: var(--perf-verde-50);
  --bs-menu-active-color: var(--perf-verde);
  --bs-menu-sub-active-bg: var(--perf-verde-50);
  --bs-menu-sub-active-color: var(--perf-verde);
  --bs-menu-hover-bg: #f1f4f1;
  --bs-menu-active-toggle-bg: #eef1ee;
}

/* ---------- Tipografía ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h5, h6, .h5, .h6 { font-weight: 600; letter-spacing: -.005em; }
p, .card-body > p { text-wrap: pretty; }
.form-label { font-weight: 500; color: var(--perf-tinta); text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.text-muted, .text-body-secondary { color: var(--perf-tinta-2) !important; }
table, .badge, .ca-numero { font-variant-numeric: tabular-nums; }
::selection { background: var(--perf-verde-100); color: var(--perf-verde-700); }

/* ---------- Superficies ---------- */
.card {
  --bs-card-border-radius: var(--perf-radio);
  --bs-card-inner-border-radius: calc(var(--perf-radio) - 1px);
  --bs-card-box-shadow: var(--perf-sombra);
  border: 1px solid rgba(18, 38, 24, .04);
}
.card .card { box-shadow: none; border-color: var(--perf-borde); }   /* tarjetas anidadas sin doble sombra */
.card-header { border-bottom: 1px solid var(--perf-borde); }
.card-header h5, h5.card-header, .card-header .card-title { font-weight: 600; }
h6.card-header { font-size: .8125rem; font-weight: 600; color: var(--perf-tinta-2); letter-spacing: .01em; }

/* ---------- Menú vertical ---------- */
.layout-menu.menu-vertical { border-right: 1px solid var(--perf-borde); box-shadow: none !important; }
.menu-vertical .menu-header { margin-top: 1rem; }
.menu-vertical .menu-header .menu-header-text { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; color: #8a978e; }
.menu-vertical .menu-link { transition: background-color var(--perf-transicion), color var(--perf-transicion); }
.menu-vertical .menu-inner > .menu-item.open > .menu-link.menu-toggle { font-weight: 600; }
.menu-vertical .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) { font-weight: 600; }
/* Elemento actual dentro de un grupo: barra verde a la izquierda */
.menu-vertical .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--perf-verde);
}
.menu-vertical .menu-sub .menu-link { font-size: .875rem; }
.menu .app-brand.demo { border-bottom: 1px solid var(--perf-borde); margin-bottom: .5rem; }
/* Logo SAG horizontal: ocupa todo el ancho de la franja del menú y la altura se ajusta sola.
   demo.css del tema fijaba la franja en 64 px y el logo en 22×38 px (el logo de Sneat). */
/* z-index: la sombra del menú al desplazarse (.menu-inner-shadow, a 4.35rem) quedaba sobre el logo. */
.menu .app-brand.demo { height: auto; padding-block: .75rem; position: relative; z-index: 3;
                        background-color: var(--bs-menu-bg); }
.app-brand.demo .app-brand-link,
.app-brand-logo.demo,
.app-brand-logo.demo > span { display: block; flex: 1 1 auto; inline-size: 100%; }
.app-brand-logo.demo svg { display: block; width: 100%; height: auto; }
/* Pantallas de acceso (login, recuperación, registro): el logo ocupa todo el ancho del formulario.
   page-auth.css lo fijaba en 22×38 px; perf.css carga después y gana con la misma especificidad. */
.authentication-wrapper .app-brand-link,
.authentication-wrapper .app-brand-logo.demo,
.authentication-wrapper .app-brand-logo.demo > span { display: block; inline-size: 100%; }
.authentication-wrapper .app-brand-logo.demo svg { display: block; inline-size: 100%; block-size: auto; }

/* ---------- Barra superior ---------- */
.layout-navbar.navbar-detached {
  background-color: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(18, 38, 24, .05), 0 6px 18px rgba(18, 38, 24, .05) !important;
  border-radius: var(--perf-radio) !important;
}
.layout-navbar .avatar img { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--perf-verde-200); }

/* ---------- Botones ---------- */
.btn {
  font-weight: 500;
  border-radius: var(--perf-radio-sm);
  transition: background-color var(--perf-transicion), border-color var(--perf-transicion),
              color var(--perf-transicion), box-shadow var(--perf-transicion), transform 80ms ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { box-shadow: 0 1px 2px rgba(var(--perf-verde-rgb), .25); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(var(--perf-verde-rgb), .25); }
.btn:focus-visible { box-shadow: var(--perf-anillo) !important; }
.btn-secondary {
  --bs-btn-bg: #fff; --bs-btn-color: var(--perf-tinta); --bs-btn-border-color: var(--perf-borde);
  --bs-btn-hover-bg: #f3f5f3; --bs-btn-hover-color: var(--perf-tinta); --bs-btn-hover-border-color: #d3dad5;
  --bs-btn-active-bg: #eceFec; --bs-btn-active-color: var(--perf-tinta); --bs-btn-active-border-color: #d3dad5;
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
  border-radius: var(--perf-radio-sm);
  border-color: #d6ddd8;
  transition: border-color var(--perf-transicion), box-shadow var(--perf-transicion);
}
.form-control:hover:not(:disabled):not([readonly]), .form-select:hover:not(:disabled) { border-color: #b9c4bd; }
.form-control:focus, .form-select:focus {
  border-color: var(--perf-verde) !important;
  box-shadow: var(--perf-anillo) !important;
}
.form-control::placeholder { color: #9aa59e; }
.form-check-input:checked { background-color: var(--perf-verde); border-color: var(--perf-verde); }
.form-check-input:focus { box-shadow: var(--perf-anillo); border-color: var(--perf-verde); }
.form-control[readonly] { background-color: #f6f8f6; }

/* ---------- Pestañas de sección (nav-pills) ---------- */
#pestanas_seccion.nav-pills, .nav-pills {
  gap: .25rem;
}
#pestanas_seccion.nav-pills {
  display: inline-flex; padding: .3rem; border-radius: calc(var(--perf-radio-sm) + .3rem);
  background: #fff; box-shadow: var(--perf-sombra); border: 1px solid rgba(18, 38, 24, .04);
}
.nav-pills .nav-link {
  text-transform: none;
  border-radius: var(--perf-radio-sm); font-weight: 500; color: var(--perf-tinta-2);
  transition: background-color var(--perf-transicion), color var(--perf-transicion);
}
.nav-pills .nav-link:hover:not(.active) { background: var(--perf-verde-50); color: var(--perf-verde); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--perf-verde); color: #fff; box-shadow: 0 2px 8px rgba(var(--perf-verde-rgb), .25);
}

/* ---------- Tablas ---------- */
.table { --bs-table-hover-bg: var(--perf-verde-50); --bs-table-hover-color: var(--perf-tinta); }
.table > thead th, table.dataTable thead th {
  font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--perf-tinta-2); background: #f7f9f7; border-bottom: 1px solid var(--perf-borde) !important;
  white-space: nowrap;
}
.table > tbody > tr > td { border-color: #eef1ee; vertical-align: middle; }
.table > tbody > tr { transition: background-color var(--perf-transicion); }
.table-light { --bs-table-bg: #f3f6f3; }

/* DataTables (consultas): mismo lenguaje que el resto */
table.dataTable { border-collapse: collapse !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--perf-borde) !important; }
table.dataTable tbody tr:hover > * { background-color: var(--perf-verde-50) !important; }
.dataTables_wrapper { padding: .5rem 1.25rem 1rem; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #d6ddd8 !important; border-radius: var(--perf-radio-sm) !important;
  padding: .375rem .75rem !important; background: #fff !important; outline: 0;
  transition: border-color var(--perf-transicion), box-shadow var(--perf-transicion);
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--perf-verde) !important; box-shadow: var(--perf-anillo); }
.dataTables_wrapper .dataTables_info { color: var(--perf-tinta-2) !important; font-size: .8125rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--perf-radio-sm) !important; border: 1px solid transparent !important;
  color: var(--perf-tinta) !important; transition: background-color var(--perf-transicion);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--perf-verde-50) !important; color: var(--perf-verde) !important; border-color: transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--perf-verde) !important; color: #fff !important; border-color: var(--perf-verde) !important;
}
.dataTables_wrapper .dt-buttons .dt-button {
  border-radius: var(--perf-radio-sm) !important; border: 1px solid var(--perf-borde) !important;
  background: #fff !important; color: var(--perf-tinta) !important; font-size: .8125rem;
}
.dataTables_wrapper .dt-buttons .dt-button:hover { background: var(--perf-verde-50) !important; color: var(--perf-verde) !important; }

/* ---------- Menús de acciones, alertas, insignias ---------- */
.dropdown-menu {
  border: 1px solid var(--perf-borde); border-radius: var(--perf-radio); box-shadow: var(--perf-sombra-hover); padding: .375rem;
}
.dropdown-item { border-radius: var(--perf-radio-sm); transition: background-color var(--perf-transicion); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--perf-verde-50); color: var(--perf-verde); }
.alert { border-radius: var(--perf-radio); border-width: 1px; }
.alert-info { --bs-alert-bg: #eef4f8; --bs-alert-color: #24485e; --bs-alert-border-color: #d3e3ee; }
.alert-secondary { --bs-alert-bg: #f4f6f4; --bs-alert-color: var(--perf-tinta-2); --bs-alert-border-color: var(--perf-borde); }
.badge { font-weight: 600; letter-spacing: .01em; border-radius: .375rem; }
.bg-label-primary { background-color: var(--perf-verde-50) !important; color: var(--perf-verde) !important; }

/* ---------- Pie de página ---------- */
.content-footer .footer-container { color: var(--perf-tinta-2); font-size: .8125rem; border-top: 1px solid var(--perf-borde); }

/* ---------- Accesibilidad ---------- */
a:focus-visible, .menu-link:focus-visible, .nav-link:focus-visible { outline: 0; box-shadow: var(--perf-anillo); border-radius: var(--perf-radio-sm); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ======================================================================
 * Piezas de página reutilizables (formularios y consultas del sistema)
 * ====================================================================== */

/* Encabezado: ruta de regreso, título, descripción y acciones */
.pg-encabezado { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; }
.pg-encabezado .pg-ruta { display: inline-flex; align-items: center; gap: .15rem; font-size: .8125rem; color: var(--perf-tinta-2); text-decoration: none; }
.pg-encabezado .pg-ruta:hover { color: var(--perf-verde); }
.pg-encabezado h4 { margin: .2rem 0 0; font-weight: 600; letter-spacing: -.01em; }
.pg-encabezado p { margin: .35rem 0 0; max-width: 66ch; color: var(--perf-tinta-2); text-wrap: pretty; }
.pg-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Sección con ícono y título */
.pg-seccion { border-radius: var(--perf-radio); margin-bottom: 1.5rem; scroll-margin-top: 6rem; }
.pg-seccion > .card-body { padding: 1.5rem 1.5rem 1.75rem; }
.pg-titulo { display: flex; gap: .875rem; align-items: flex-start; margin-bottom: 1.25rem; }
.pg-titulo h5 { margin: 0; font-weight: 600; }
.pg-titulo small { display: block; color: var(--perf-tinta-2); margin-top: .15rem; }
.pg-icono { flex: 0 0 2.25rem; height: 2.25rem; border-radius: .6rem; display: grid; place-items: center;
            background: var(--perf-verde-50); color: var(--perf-verde); }
.pg-subtitulo { font-size: .8125rem; font-weight: 600; color: var(--perf-tinta-2); margin: 0 0 .75rem; }
.pg-caja { background: #f6f8f6; border-radius: .6rem; padding: 1rem 1rem .25rem; margin-bottom: 1.25rem; }

/* Campos: obligatorio, opcional, ayuda y error en línea */
.pg-campo .req { color: var(--bs-danger); }
.pg-campo .opcional { font-weight: 400; color: var(--perf-tinta-2); font-size: .75rem; }
.pg-campo .pg-ayuda { display: block; margin-top: .3rem; font-size: .75rem; color: var(--perf-tinta-2); }
.pg-campo .pg-error { display: block; margin-top: .3rem; font-size: .8125rem; color: var(--bs-danger); }
.pg-campo.con-error .form-control, .pg-campo.con-error .form-select { border-color: var(--bs-danger) !important; }
.pg-check { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border: 1px solid var(--perf-borde);
            border-radius: .6rem; cursor: pointer; transition: border-color var(--perf-transicion), background-color var(--perf-transicion); }
.pg-check:hover { border-color: #c9d3cc; }
.pg-check:has(input:checked) { border-color: var(--perf-verde-200); background: var(--perf-verde-50); }
.pg-check .form-check-input { margin-top: .15rem; flex-shrink: 0; }

/* Panel de acciones fijo a un costado */
.pg-panel { position: sticky; top: 6rem; border-radius: var(--perf-radio); }
.pg-panel dl { font-size: .875rem; margin: 0 0 1.25rem; }
.pg-panel dt { font-weight: 500; color: var(--perf-tinta-2); font-size: .75rem; margin-top: .6rem; }
.pg-panel dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .pg-panel { position: static; } }

/* Estado vacío con indicación de qué hacer */
.pg-vacio { text-align: center; padding: 2.5rem 1.5rem; color: var(--perf-tinta-2); }
.pg-vacio .pg-icono { margin: 0 auto .75rem; width: 3rem; height: 3rem; flex-basis: 3rem; }
.pg-vacio strong { display: block; color: var(--perf-tinta); font-weight: 600; margin-bottom: .25rem; }

/* Barra de acciones que acompaña al desplazarse por formularios largos */
.pg-barra-acciones { position: sticky; bottom: 1rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .75rem 1rem;
                     align-items: center; justify-content: space-between; padding: .75rem 1rem; margin-top: 1rem;
                     border-radius: var(--perf-radio); background: rgba(255, 255, 255, .92);
                     -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
                     box-shadow: 0 0 0 1px var(--perf-borde), var(--perf-sombra-hover); }

/* ---------- Flujo del expediente: Carga → Revisión → Dictamen ---------- */
.fl-etapas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.fl-etapa { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: center; padding: .75rem .9rem;
            border-radius: .7rem; border: 1px solid var(--perf-borde); color: var(--perf-tinta); text-decoration: none;
            transition: border-color var(--perf-transicion), background-color var(--perf-transicion); }
.fl-etapa:hover { border-color: var(--perf-verde-200); color: var(--perf-tinta); }
.fl-etapa.actual { border-color: var(--perf-verde); background: var(--perf-verde-50); box-shadow: inset 0 0 0 1px var(--perf-verde); }
.fl-num { grid-row: span 2; width: 2rem; height: 2rem; border-radius: .55rem; display: grid; place-items: center; font-weight: 600;
          background: #eef1ee; color: var(--perf-tinta-2); font-variant-numeric: tabular-nums; }
.fl-etapa.actual .fl-num { background: var(--perf-verde); color: #fff; }
.fl-texto b { display: block; font-weight: 600; line-height: 1.2; }
.fl-texto small { color: var(--perf-tinta-2); }
.fl-barra { grid-column: 2; height: .3rem; border-radius: 1rem; background: #e9ede9; overflow: hidden; }
.fl-barra span { display: block; height: 100%; border-radius: 1rem; }
.fl-barra .carga { background: #8a978e; } .fl-barra .revision { background: #3f8fb0; } .fl-barra .dictamen { background: #c58a1a; }
@media (max-width: 767.98px) { .fl-etapas { grid-template-columns: 1fr; } }

/* Listas de secciones y títulos: el elegido con tono suave y barra, no relleno sólido */
#lista_secciones .list-group-item.active, #lista_titulos .list-group-item.active {
  background: var(--perf-verde-50); color: var(--perf-tinta); border-color: var(--perf-borde);
  box-shadow: inset 3px 0 0 var(--perf-verde); z-index: 1;
}
#lista_secciones .list-group-item.active .text-muted, #lista_titulos .list-group-item.active .text-muted { color: var(--perf-tinta-2) !important; }
#lista_secciones .list-group-item-action, #lista_titulos .list-group-item-action { transition: background-color var(--perf-transicion); }
#lista_secciones .bg-lighter, #lista_titulos .bg-lighter { background: #f6f8f6 !important; color: var(--perf-verde) !important; letter-spacing: .01em; }

/* Voto del dictamen como dos tarjetas */
.dv-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.dv-opcion { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 1rem; border-radius: .7rem;
             border: 1px solid var(--perf-borde); cursor: pointer; transition: border-color var(--perf-transicion), background-color var(--perf-transicion); }
.dv-opcion:hover { border-color: #c9d3cc; }
.dv-opcion .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.dv-opcion strong { display: block; font-weight: 600; }
.dv-opcion small { color: var(--perf-tinta-2); }
.dv-opcion.si:has(input:checked) { border-color: var(--bs-success); background: rgba(var(--bs-success-rgb), .07); }
.dv-opcion.no:has(input:checked) { border-color: var(--bs-danger); background: rgba(var(--bs-danger-rgb), .06); }
.dv-opcion.no:has(input:checked) .form-check-input { background-color: var(--bs-danger); border-color: var(--bs-danger); }
@media (max-width: 575.98px) { .dv-opciones { grid-template-columns: 1fr; } }

/* Tarjetas con encabezado pequeño (Filtros, Procedimiento): el tema quita el margen superior del cuerpo. */
h6.card-header + .card-body { padding-top: 1.25rem; }

/* ---------- Acordeón del expediente (_acordeon_expediente.html) ----------
   Contenido → Apartado → Sección → Subsección; Estructura, Expediente, Carga, Revisión y Dictamen. */
.acc-exp .accordion-button { font-weight: 600; font-size: .9rem; padding: .8rem 1rem; }
.acc-exp .accordion-button:not(.collapsed) { background: var(--perf-verde-50); color: var(--perf-verde); box-shadow: none; }
.acc-exp .acc-fila { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: transparent;
                     text-align: left; padding: .6rem 1rem .6rem 1.25rem; font-size: .875rem; border-top: 1px solid var(--bs-border-color); }
.acc-exp .acc-fila:hover { background: var(--bs-tertiary-bg, #f6f7f9); }
.acc-exp .acc-fila-elegible { padding-left: .9rem; }
.acc-exp .acc-fila.activa { background: var(--perf-verde-50); box-shadow: inset 3px 0 0 var(--perf-verde); }
.acc-exp .acc-flecha { transition: transform .2s ease; width: 1rem; height: 1rem; flex-shrink: 0; }
.acc-exp .acc-fila:not(.collapsed) > .acc-flecha,
.acc-exp .acc-toggle:not(.collapsed) .acc-flecha { transform: rotate(90deg); }
.acc-exp .acc-seccion { padding: .55rem 1rem .55rem 1.75rem; border-top: 1px dashed var(--bs-border-color); font-size: .875rem; }
.acc-exp .acc-seccion.activa { background: var(--perf-verde-50); box-shadow: inset 3px 0 0 var(--perf-verde); }
.acc-exp .acc-toggle { flex: 0 0 1.5rem; height: 1.5rem; border: 0; background: transparent; padding: 0; color: var(--bs-secondary-color); }
.acc-exp .acc-enlace { color: inherit; text-decoration: none; }
.acc-exp .acc-enlace:hover { color: var(--perf-verde); }
.acc-exp .acc-subsecciones { list-style: none; margin: .4rem 0 0 1.75rem; padding: 0; border-left: 2px solid var(--bs-border-color); }
.acc-exp .acc-subsecciones a { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem .75rem;
                               font-size: .8125rem; color: inherit; text-decoration: none; }
.acc-exp .acc-subsecciones a:hover { background: var(--bs-tertiary-bg, #f6f7f9); color: var(--perf-verde); }
/* Panel de la derecha: fijo al bajar; el bloque al que lleva la liga (#sub_, #sec_) se resalta. */
.panel-acordeon { position: sticky; top: 6rem; }
.blanco-ancla { scroll-margin-top: 7rem; border-radius: .5rem; transition: background-color .3s ease; }
.blanco-ancla:target { background: var(--perf-verde-50); box-shadow: 0 0 0 2px var(--perf-verde); }
@media (prefers-reduced-motion: reduce) { .acc-exp .acc-flecha, .blanco-ancla { transition: none; } }
.acc-exp .acc-nivel5 { margin: .15rem 0 .25rem 1.25rem; border-left-style: dotted; }
.acc-exp .acc-nivel5 a { font-size: .78rem; padding: .2rem .6rem; }

/* Permisos por acción (Permisos Grupo Usuarios): el <body> trae data-puede-agregar/editar/eliminar
   de la pantalla actual; los botones marcados con la acción que no se permite no se muestran,
   incluidos los de tablas dibujadas con JavaScript y ventanas flotantes. */
[data-puede-agregar="0"] .accion-agregar,
[data-puede-editar="0"] .accion-editar,
[data-puede-eliminar="0"] .accion-eliminar { display: none !important; }