/* Configuración igual en todos (ajustes.js): las pestañas a la izquierda y el panel a la derecha. El color de la pestaña
   elegida es el acento de cada sistema */
.cfg { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100%; }
.cfg-nav { display: flex; flex-direction: column; gap: 2px; padding: 20px 10px; border-right: 1px solid var(--linea); background: var(--capa); }
.cfg-nav button { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--tinta-2); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.cfg-nav button:hover { background: var(--capa-2); color: var(--tinta); }
.cfg-nav button[aria-current="true"] { background: var(--acento-suave); color: var(--acento-texto); }
.cfg-nav .cfg-mi { margin-top: auto; }
.cfg-panel { display: grid; align-content: start; gap: 18px; min-height: 0; overflow: auto; padding: 22px 28px; scrollbar-width: thin; }
.cfg-form { display: grid; gap: 14px; max-width: 760px; }
.cfg-pie { display: flex; max-width: 760px; }
.cfg-pie .boton { min-width: 220px; }
@media (max-width: 899px) {
  .cfg { display: block; height: auto; }
  .cfg-nav { flex-direction: row; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--linea); scrollbar-width: none; }
  .cfg-nav button { flex: none; }
  .cfg-nav .cfg-mi { margin: 0; }
  .cfg-panel { padding: 16px 14px 28px; overflow: visible; }
}